呢呢 Blog
Ni Ni
2021-01-28

markdown语法

# 1、标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
1
2
3
4
5
6

# 2、段落格式

# 字体

斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
1
2
3
4
5
6

# 文字高亮

这是高亮

`这是高亮`
1

# 分割线

***
* * *
*****
- - -
----------
1
2
3
4
5

# 删除线

BAIDU.COM

~~BAIDU.COM~~
1

# 下划线

带下划线文本

<u>带下划线文本</u>
1

# 3、列表

Markdown 支持有序列表和无序列表。 无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

# 无序列表

  • 第一项
  • 第二项
  • 第三项
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项
1
2
3
4
5
6
7
8
9
10

# 有序列表

有序列表使用数字并加上 . 号来表示，如：

  1. 第一项
  2. 第二项
  3. 第三项
1. 第一项
2. 第二项
3. 第三项
1
2
3

# 列表嵌套

列表嵌套只需在子列表中的选项前面添加四个空格即可：

  1. 第一项：
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项：
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素
1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
1
2
3
4
5
6

# 4、区块

区块引用

> 区块引用
1

# 区块嵌套

另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：

最外层

第一层嵌套

第二层嵌套

> 最外层
> > 第一层嵌套
> > > 第二层嵌套
1
2
3

# 区块中使用列表

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项
1
2
3
4
5
6

# 列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

  • 第一项

    菜鸟教程 学的不仅是技术更是梦想

  • 第二项
* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项
1
2
3
4

# 5、代码

printf() 函数

`printf()` 函数
1

# 代码区块

$(document).ready(function () {
    alert('RUNOOB');
});
1
2
3
​```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
​```
1
2
3
4
5

# 6、链接

https://www.runoob.com
这是博客链接

<https://www.runoob.com>
这是[博客链接](https://julie7366.github.io/blog/)
1
2

# 高级链接

这个链接用 1 作为网址变量 Google
这个链接用 runoob 作为网址变量 Runoob
然后在文档的结尾为变量赋值（网址）

这个链接用 1 作为网址变量 [Google][1]   
这个链接用 runoob 作为网址变量 [Runoob][runoob]   
然后在文档的结尾为变量赋值（网址）

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/
1
2
3
4
5
6

# 7、图片

alt

![alt](http://static.runoob.com/images/runoob-logo.png)
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">
1
2

# 8、表格

表头 表头
单元格 单元格
单元格 单元格
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
1
2
3
4

# 对齐方式

左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
1
2
3
4

# 9、Emoji表情包

查看更多的Emoji

🐻 🐵 🐫 🐼 🐤

:bear:
1

# 10、高级技巧

# 支持的Html标签

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如:

使用 Ctrl+Alt+Del 重启电脑

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
1

# 转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

文本加粗
** 正常显示星号 **

**文本加粗**   
\*\* 正常显示星号 \*\*
1
2

# 11*** 以下部分在Github或其他在线预览中暂未支持 ***

未支持的内容 参考地址

# 12、目录

[[toc]]
1

以下是markdown拓展语法

# 13、自定义容器 提示框

提示

这是一个提示

注意

这是一个警告

这是警告

这是一个危险警告

这是详情

这是一个详情块，在 IE / Edge 中不生效

::: tip
这是一个提示
:::

::: warning 这是警告
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 14、代码行高亮

这种配置方式也可{1,2,4}




 
 



export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
1
2
3
4
5
6
7
​``` javascript {4-5}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
​```
1
2
3
4
5
6
7
8
9

# 15、布局容器

# 我是居中的内容

（可用于标题、图片等的居中）

我是右浮动的内容

点击查看

这是一个详情块，在 IE / Edge 中不生效

console.log('这是一个详情块')
1

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自 维基百科

代码实现

	::: center
       ### 我是居中的内容
	  （可用于标题、图片等的居中）
	:::
	
	::: right
	  [我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
	:::
	
	::: details
	这是一个详情块，在 IE / Edge 中不生效
	```js
	console.log('这是一个详情块')
	```
	:::
	
	::: theorem 牛顿第一定律
	假若施加于某物体的外力为零，则该物体的运动速度不变。
	::: right
	来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
	:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 16、普通卡片列表

普通卡片列表容器，可用于友情链接、项目推荐、诗词展示等。

# 卡片列表1

麋鹿鲁哟

大道至简，知易行难

XAOXUU

#IOS #Volantis主题作者

平凡的你我

理想成为大牛的小陈同学

- name: 麋鹿鲁哟
  desc: 大道至简，知易行难
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
  link: https://www.cnblogs.com/miluluyo/ # 可选
  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
  textColor: '#6854A1' # 可选，默认var(--textColor)
- name: XAOXUU
  desc: '#IOS #Volantis主题作者'
  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  link: https://xaoxuu.com
  bgColor: '#718971'
  textColor: '#fff'
- name: 平凡的你我
  desc: 理想成为大牛的小陈同学
  avatar: https://reinness.com/avatar.png
  link: https://reinness.com
  bgColor: '#FCDBA0'
  textColor: '#A05F2C'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

实现代码

	::: cardList
	```yaml
	- name: 麋鹿鲁哟
	  desc: 大道至简，知易行难
	  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg # 可选
	  link: https://www.cnblogs.com/miluluyo/ # 可选
	  bgColor: '#CBEAFA' # 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号
	  textColor: '#6854A1' # 可选，默认var(--textColor)
	- name: XAOXUU
	  desc: '#IOS #Volantis主题作者'
	  avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
	  link: https://xaoxuu.com
	  bgColor: '#718971'
	  textColor: '#fff'
	- name: 平凡的你我
	  desc: 理想成为大牛的小陈同学
	  avatar: https://reinness.com/avatar.png
	  link: https://reinness.com
	  bgColor: '#FCDBA0'
	  textColor: '#A05F2C'
	```
	:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 语法

	::: cardList <每行显示数量>
	``` yaml
	- name: 名称
	  desc: 描述
	  avatar: https://xxx.jpg # 头像，可选
	  link: https://xxx/ # 链接，可选
	  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
	  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
	```
	:::
1
2
3
4
5
6
7
8
9
10
具体参数配置 
- `<每行显示数量>` 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
- 代码块需指定语言为yaml
- 代码块内是一个yaml格式的数组列表
- 数组成员的属性有：
1. name名称
2. desc描述
3. avatar头像，可选
4. link链接，可选
5. bgColor背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
6. textColor文本色，可选，默认var(--textColor)

# card列表2

《静夜思》

床前明月光，疑是地上霜。举头望明月，低头思故乡。

Vdoing

🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题

- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
1
2
3
4
5
6
7
8
9
	::: cardList 2
	```yaml
	- name: 《静夜思》
	  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
	  bgColor: '#F0DFB1'
	  textColor: '#242A38'
	- name: Vdoing
	  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
	  link: https://github.com/xugaoyi/vuepress-theme-vdoing
	  bgColor: '#DFEEE7'
	  textColor: '#2A3344'
	```
	:::
1
2
3
4
5
6
7
8
9
10
11
12
13

# 17、图文卡片列表

图文卡片列表容器，可用于项目展示、产品展示等。

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Evan Xu

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Evan Xu

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Evan Xu
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: Evan Xu # 作者，可选
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Evan Xu
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Evan Xu
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	::: cardImgList
	```yaml
	- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
	  link: https://xugaoyi.com/
	  name: 标题
	  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
	  author: Evan Xu # 作者，可选
	  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像，可选
	- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
	  link: https://xugaoyi.com/
	  name: 标题
	  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
	  author: Evan Xu
	  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
	- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
	  link: https://xugaoyi.com/
	  name: 标题
	  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
	  author: Evan Xu
	  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
	```
	:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 语法

	::: cardImgList <每行显示数量>
	``` yaml
	- img: https://xxx.jpg # 图片地址
	  link: https://xxx.com # 链接地址
	  name: 标题
	  desc: 描述 # 可选
	  author: 作者名称 # 可选
	  avatar: https://xxx.jpg # 作者头像，可选
	```
	:::
1
2
3
4
5
6
7
8
9
10
详细配置 
- <每行显示数量> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。
- 代码块需指定语言为yaml
- 代码块内是一个yaml格式的数组列表
- 数组成员的属性有：
1. img图片地址
2. link链接地址
3. name标题
4. desc描述，可选
5. author作者名称，可选
6. avatar作者头像，可选
编辑
#笔记
上次更新: 2021/07/22, 09:36:34
vscode插件同步
webpack笔记

← webpack笔记→

最近更新
01
react全家桶搭建全家桶模板
 10-19
02
react学习到搭建一个全家桶的基础模板
 10-09
03
202108自修图
 09-24
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ni Ni | MIT License
×