Markdown语法说明及测试一览表

Markdown 注意事项

嵌套：在对象的行首放置2个空格(列表嵌套至少需要3个空格)
换行：在行的结束处放置2个空格后回车
换段：在两行之间空一行

Markdown 目录

在文中放置[toc]

Markdown 代码

行内代码

用 ` 包裹行内代码

代码区块

推荐使用```包裹代码块，不推荐在代码块的行首放置至少4个空格或1个制表符

行首放置空格

在代码块的行首放置4个空格，段落和代码区块之间至少空一行。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/likecs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：段落

段落和代码区块之间可以有空行

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/likecs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：无序列表

在无序列表内嵌套代码区块，代码块的行首需要放置2个或者4个空格，列表项和代码区块之间可以有空行。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/likecs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

包裹代码块：有序列表

在有序列表内嵌套代码区块，代码块的行首需要放置4个空格，列表项和代码区块之间可以有空行。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/likecs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

放置2个空格时，渲染效果与放置4个空格时一致，但是代码块不会嵌套缩进。

h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
padding-left:45px!important;
background-image: url(https://images.cnblogs.com/likecs_com/Sky-seeker/1909833/o_210101060840MarkDown_CSS-h1_before.png);
background-size: 40px;
background-repeat: no-repeat; 
background-position:center left; 
}

Markdown 标题

在标题前放置1~6个#号

二级标题

三级标题

四级标题

五级标题

六级标题

Markdown 段落格式

常用通用部分

用1~3个*包裹文本分别实现斜体、粗体、粗斜体，不推荐使用 _ 。
这是*包裹的斜体文本，这是_包裹的_斜体_文本
这是**包裹的粗体文本，这是__包裹的__粗体__文本
这是***包裹的粗斜体文本，这是___包裹的___粗斜体___文本

非常用通用部分

下标：使用~包裹文本，如H₂O
上标：使用^包裹文本，如X²
高亮：使用==包裹文本，如highlight
删除线：使用~~包裹文本，如~~删除线~~
下划线：使用包裹文本，如带下划线文本

脚注：

脚注[^脚注文本]
[^脚注文本]: 脚注的内容

脚注^[1]

分隔线：3个及以上连续的-

Markdown 列表

无序列表

在-后面带一个空格，不推荐使用 + 和 *。

无序列表 -
无序列表 -
无序列表 -
无序列表 *

无序列表 +

有序列表

在阿拉伯数字后面带一个.和一个空格

有序列表1.
有序列表2.

列表嵌套

在无序列表中嵌套列表，需要在子列表中的行首放置至少2个空格。
在有序列表中嵌套列表，需要在子列表中的行首放置至少3个空格。

列表嵌套 -
1. 列表嵌套 -1.
- 列表嵌套 --

列表嵌套 1.
1. 列表嵌套 1.1.
- 列表嵌套 1.-

任务列表

在 + 后面带一个空格，在空格后再带一个 [ ] ， [ ] 的后面再带一个空格， [ ] 里面为一个空格时表示任务未完成， [ ] 里面为一个 x 时表示任务已完成。不推荐使用 - 和 *。

已完成任务 `+ [x]`
待完成任务 `+ [ ]`
- 待完成任务 `__+ [ ]`
已完成任务 `- [x]`

已完成任务 `* [x]`

Markdown 表格

用 | 分隔单元格，用 - 分隔表头和其他行，用 : 控制对齐方式

| 表头   | 左对齐 | 右对齐 | 居中对齐 |
| ------ | :----- | -----: | :------: |
| 单元格 | 单元格 | 单元格 |  单元格  |
| 单元格 | 单元格 | 单元格 |  单元格  |

表头	左对齐	右对齐	居中对齐
单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格

Markdown 区块

区块引用

在行首放置1个 >

区块引用

区块引用嵌套

在行首放置多个 > ，段落和列表的下一行放置 > 时会自动对区块引用进行嵌套

最外层

第一层嵌套

第二层嵌套

区块引用中使用列表

有序列表 1.

有序列表 1.

无序列表 -

无序列表 -

列表中使用区块引用

在 > 前添加2个空格的缩进

第一项

区块引用

Markdown 链接

普通链接

<链接地址>
[链接名称](链接地址)
[链接名称](链接地址 "可选标题")

<https://markdown-here.com>
[Markdown Here](https://markdown-here.com)
[Markdown Here](https://markdown-here.com "Markdown Here 标题")

https://markdown-here.com

Markdown Here

锚点链接（在文档的结尾为变量赋值）

[链接名称][网址变量]
[网址变量]:链接地址

[Markdown Here][markdown_here_url]
[Markdown_Here_url]:https://markdown-here.com

Markdown Here

Markdown 图片

一般图片链接

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 '可选标题')
![alt 属性文本](图片地址 "可选标题")

![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg)
![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg '梦幻之心星'))
![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg "梦幻之心星")

Markdown语法说明及测试一览表

高级链接

在文档的结尾为变量赋值

![alt 属性文本][图片地址变量]
[图片地址变量]: 图片地址

![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/dream-seeker.jpg

<img src="https://markdown-here.com/img/icon256.png" width="50%">

![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/dream-seeker.jpg

Markdown 高级技巧

支持的 HTML 元素

不在 Markdown 涵盖范围内的标签，都能直接使用。目前支持的 HTML 元素有：<kbd> 等。

1. 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
2. 特殊符号 &copy; &trade; &amp; 18&ordm;C
3. <span style="color: red;">这是一行红色的文字</span>
4. 插入视频
<video src="$appres/images/example.mp4"></video>
5. Emoji 表情 :smiley:

使用 Ctrl+Alt+Del 重启电脑
这是一行红色的文字
插入视频
Emoji 表情 ????

转义

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

数学公式

使用美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式

行内公式 $E=mc^2$ ，如 $E=mc^2$
块公式

$$
\sum_{i=1}^n a_i=0
$$

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
{$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

\[\sum_{i=1}^n a_i=0 \]

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} {$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} \]

画图

饼图 `mermaid pie`

pie title LightZhan创作，允许规范转载（http://lightzhan.xyz） "Joplin" : 42.96 "Qdown" : 50.05 " 黑科技" : 10.01 "其它" : 5

横向流程图 `mermaid graph LR`

graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]

竖向流程图 `mermaid graph TD`

graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图]

标准流程图 `flow`

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

标准流程图（横向） `flow`

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

UML 时序图 `sequence`

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

UML 复杂时序图 `sequence`

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

UML 标准时序图 `mermaid`

%% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 张三 participant 李四张三->王五: 王五你好吗？ loop 健康检查王五->王五: 与疾病战斗 end Note right of 王五: 合理食物 看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

甘特图 `mermaid`

%% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h

Markdown 语法测试

````
## Markdown 目录

[toc]

## Markdown 代码

- 行内代码`code`

- 代码区块：行首放4个空格

    h1  {
    font-size: 24px;
    text-align: left;
    color: #40b8fa;
    }
    
- 代码区块：用<code>```</code>包裹

```CSS
h1  {
font-size: 24px;
text-align: left;
color: #40b8fa;
}
```
## 包裹代码块

- 无序列表内嵌套代码区块，代码块行首放置4个空格。
  ```CSS
  h1  {
  font-size: 24px;
  text-align: left;
  color: #40b8fa;
  }
  ```

1. 有序列表内嵌套代码区块，代码块行首放置4个空格。
    ```CSS
    h1  {
    font-size: 24px;
    text-align: left;
    color: #40b8fa;
    }
    ```

2. 有序列表内嵌套代码区块，代码块行首放置2个空格。
  ```CSS
  h1  {
  font-size: 24px;
  text-align: left;
  color: #40b8fa;
  }
  ```

---

## Markdown 标题

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

## Markdown 段落格式

### 常用通用部分。

- 这是`*`包裹的*斜体*文本，这是`_`包裹的_斜体_文本
- 这是`**`包裹的**粗体**文本，这是`__`包裹的__粗体__文本
- 这是`***`包裹的***粗斜体***文本，这是`___`包裹的___粗斜体___文本

### 非常用通用部分。

- 下标：使用`~`包裹文本，如H~2~O
- 上标：使用`^`包裹文本，如X^2^
- 高亮：使用`==`包裹文本，如==highlight==
- 删除线：使用`~~`包裹文本，如~~删除线~~
- 下划线：使用`<u>`包裹文本，如<u>带下划线文本</u>
- 脚注：
  ```
  脚注[^脚注文本]
  [^脚注文本]: 脚注的内容
  ```
  脚注[^脚注文本]
  
  [^脚注文本]: 脚注的内容

- 分隔线：3个及以上连续的`-`

---

## Markdown 列表

### 无序列表

- 无序列表 `-`
- 无序列表 `-`
- 无序列表 `-`

* 无序列表 `*`
+ 无序列表 `+`

### 有序列表

1. 有序列表`1.`
2. 有序列表`2.`

### 列表嵌套

- 列表嵌套 `-`
  1. 列表嵌套 `-1.`
  - 列表嵌套 `--`

1. 列表嵌套 `1.`
   1. 列表嵌套 `1.1.`
   - 列表嵌套 `1.-`

### 任务列表

+ [x] 已完成任务 `+ [x]`
+ [ ] 待完成任务 `+ [ ]`
  + [ ] 待完成任务 `__+ [ ]`

- [x] 已完成任务 `- [x]`
* [x] 已完成任务 `* [x]`

## Markdown 表格

- 用 `|` 分隔单元格，用 `-` 分隔表头和其他行，用 `:` 控制对齐方式

| 表头   | 左对齐 | 右对齐 | 居中对齐 |
| ------ | :----- | -----: | :------: |
| 单元格 | 单元格 | 单元格 |  单元格  |
| 单元格 | 单元格 | 单元格 |  单元格  |

## Markdown 区块

### 区块引用

> 区块引用

### 区块引用嵌套

> 最外层
> > 第一层嵌套
> >
> > > 第二层嵌套

### 区块引用中使用列表

> 1. 有序列表 `1.`
> 2. 有序列表 `1.`
> - 无序列表 `-`
> - 无序列表 `-`

### 列表中使用区块引用

- 第一项
  
  > 区块引用

## Markdown 链接

### 普通链接

<https://markdown-here.com>
[Markdown Here](https://markdown-here.com)
[Markdown Here](https://markdown-here.com "Markdown Here 标题")

### 锚点链接（在文档的结尾为变量赋值）

[Markdown Here][markdown_here_url]

[Markdown_Here_url]:https://markdown-here.com

## Markdown 图片

### 一般图片链接

![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg)

![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg '梦幻之心星')

![梦幻之心星](https://img.skyseeker.eu.org/dream-seeker.jpg "梦幻之心星")

### 高级链接

![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/dream-seeker.jpg

<img src="https://img.skyseeker.eu.org/dream-seeker.jpg" width="10%">

## Markdown 高级技巧

### 支持的 HTML 元素:

1. 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
2. 特殊符号 &copy; &trade; &amp; 18&ordm;C
3. <span style="color: red;">这是一行红色的文字</span>
4. 插入视频<video src="$appres/images/example.mp4"></video>
5. Emoji 表情 :smiley:

### 数学公式

1. 行内公式 `$E=mc^2$`，如 $E=mc^2$
2. 块公式

$$
\sum_{i=1}^n a_i=0
$$

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
{$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

### 画图

#### 饼图 `mermaid pie`

```mermaid
pie
    title LightZhan创作，允许规范转载（http://lightzhan.xyz）
    "Joplin" : 42.96
    "Qdown" : 50.05
    " 黑科技" : 10.01
    "其它" :  5
```

#### 横向流程图 `mermaid graph LR`

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
```

#### 竖向流程图 `mermaid graph TD`

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
```

#### 标准流程图 `flow`

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

#### 标准流程图（横向） `flow`

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

#### UML 时序图 `sequence`

```sequence
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```

#### UML 复杂时序图 `sequence`

```sequence
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

#### UML 标准时序图 `mermaid`

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

#### 甘特图 `mermaid`

```mermaid
%% 语法示例
    gantt
    dateFormat  YYYY-MM-DD
    title 软件开发甘特图
    section 设计
    需求                      :done,    des1, 2014-01-06,2014-01-08
    原型                      :active,  des2, 2014-01-09, 3d
    UI设计                     :         des3, after des2, 5d
未来任务                     :         des4, after des3, 5d
    section 开发
    学习准备理解需求                      :crit, done, 2014-01-06,24h
    设计框架                             :crit, done, after des2, 2d
    开发                                 :crit, active, 3d
    未来任务                              :crit, 5d
    耍                                   :2d
    section 测试
    功能测试                              :active, a1, after des3, 3d
    压力测试                               :after a1  , 20h
    测试报告                               : 48h
```
````

博客园地址：https://www.cnblogs.com/Sky-seeker

微信公众号：关注微信公众号，获取即时推送
Markdown语法说明及测试一览表

脚注的内容 ↩︎

Markdown 注意事项

Markdown 目录

Markdown 代码

行内代码

代码区块

行首放置空格

包裹代码块：段落

包裹代码块：无序列表

包裹代码块：有序列表

Markdown 标题

二级标题

三级标题

四级标题

五级标题

六级标题

Markdown 段落格式

常用通用部分

非常用通用部分

Markdown 列表

无序列表

有序列表

列表嵌套

任务列表

Markdown 表格

Markdown 区块

区块引用

区块引用嵌套

区块引用中使用列表

列表中使用区块引用

Markdown 链接

普通链接

锚点链接（在文档的结尾为变量赋值）

Markdown 图片

一般图片链接

高级链接

Markdown 高级技巧

支持的 HTML 元素

转义

数学公式

画图

饼图 mermaid pie

横向流程图 mermaid graph LR

竖向流程图 mermaid graph TD

标准流程图 flow

标准流程图（横向） flow

UML 时序图 sequence

UML 复杂时序图 sequence

UML 标准时序图 mermaid

甘特图 mermaid

Markdown 语法测试

饼图 `mermaid pie`

横向流程图 `mermaid graph LR`

竖向流程图 `mermaid graph TD`

标准流程图 `flow`

标准流程图（横向） `flow`

UML 时序图 `sequence`

UML 复杂时序图 `sequence`

UML 标准时序图 `mermaid`

甘特图 `mermaid`