Markdown语法说明及测试一览表

Markdown 目录

  • 在文中放置[toc]

目录

Markdown 标题

  • 在标题前放置 1~6 个#号再带一个空格

    # 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

Markdown 段落格式

常用通用部分

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

非常用通用部分

  • 下标：使用~包裹文本，如 H2O

  • 上标：使用^包裹文本，如 X2

  • 高亮：使用==包裹文本，如highlight

  • 删除线：使用~~包裹文本，如删除线

  • 脚注：

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

    脚注[1]

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

Markdown 列表

无序列表

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

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

示例：

  • 无序列表
  • 无序列表
  • 无序列表

有序列表

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

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

示例：

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

无序列表嵌套

  • 在无序列表中嵌套对象，需要在对象的行首放置 2 个空格。

    - 列表嵌套
- 列表嵌套
  - 列表嵌套
  - 列表嵌套
    - 列表嵌套
    - 列表嵌套

示例：

  • 列表嵌套
  • 列表嵌套
    • 列表嵌套
    • 列表嵌套
      • 列表嵌套
      • 列表嵌套

有序列表嵌套

  • 在有序列表中嵌套对象，需要在对象的行首放置 3 个空格。
1. 列表嵌套
2. 列表嵌套
   1. 列表嵌套
   2. 列表嵌套
      1. 列表嵌套
      2. 列表嵌套

示例：

  1. 列表嵌套
  2. 列表嵌套
    1. 列表嵌套
    2. 列表嵌套
      1. 列表嵌套
      2. 列表嵌套

任务列表

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

    + [x] 已完成任务1
+ [ ] 已完成任务2
  + [x] 待完成任务3
  + [ ] 待完成任务4

示例：

Markdown 区块

区块引用

  • 行首放置 1 个>，推荐再带一个空格。

    > 这是一行区块引用
> 这是一行区块引用

示例：

这是一行区块引用
这是一行区块引用

区块引用嵌套

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

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

示例：

最外层

第一层嵌套

第二层嵌套

GitHub 样式警告框

  • 行首放置 1 个>，推荐再带一个空格，然后在放置[!NOTE]、[!TIP]、[!IMPORTANT]、[!WARNING]、[!CAUTION]。

    > [!NOTE]
> 提醒内容

> [!TIP]
> 建议内容

> [!IMPORTANT]
> 重要内容

> [!WARNING]
> 警告内容

> [!CAUTION]
> 注意内容

示例：

[!NOTE]
提醒内容

[!TIP]
建议内容

[!IMPORTANT]
重要内容

[!WARNING]
警告内容

[!CAUTION]
注意内容

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][markdown_here_url]
[Markdown_Here_url]:https://markdown-here.com

示例：
Markdown Here

Markdown 图片

一般图片链接

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

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

示例：
梦幻之心星

梦幻之心星

梦幻之心星

高级图片链接

  • 在文档的结尾为变量赋值
![alt 属性文本][图片地址变量]
[图片地址变量]: 图片地址

 ![梦幻之心星][Sky-seeker_url]
[Sky-seeker_url]: https://img.skyseeker.eu.org/icon/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/icon/dream-seeker.jpg

Markdown 表格

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

示例：

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

Markdown 高级技巧

支持的 HTML 元素

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

    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. 使用 Ctrl+Alt+Del 重启电脑
  2. 特殊符号 © ™ & 18ºC
  3. 这是一行红色的文字
  4. 插入视频
  5. Emoji 表情 😃

转义

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

Markdown 代码

行内代码

  • 用`包裹行内代码。

    - 如`code`是行内代码。

示例：
如code是行内代码。

代码区块

  • 推荐使用```包裹代码块并声明所用语言，不推荐在代码块的行首放置 4 个空格或 1 个制表符，推荐在段落和代码区块之间放置一个空行。

行首放置空格

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

h1 {
background-repeat: no-repeat;
background-position:center left;
}

包裹代码块

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

h1  {
 background-repeat: no-repeat;
background-position:center left;
}

数学公式

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

  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)}}
$$

示例：

\[\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 饼图
    "Joplin" : 42
    "Qdown" : 40
    " 黑科技" : 10
    "其它" :  8

示例：

pie title 饼图 "Joplin" : 42 "Qdown" : 40 " 黑科技" : 10 "其它" : 8

横向流程图 mermaid graph LR

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

示例：

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

竖向流程图 mermaid graph TD

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

示例：

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

标准流程图 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 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

甘特图 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/p/13038909.html
版权声明：本文依据 CC BY-NC-SA 4.0 许可证进行授权，转载请附上原文出处链接及本声明。

微信名：梦幻之心星 微信号：Sky-seeker

关注微信公众号，即时获取文章推送；访问博客园网页，正常显示网址链接。

  1. 脚注的内容 ↩︎

posted @ 2020-06-03 17:26  梦幻之心星  阅读(854)  评论(1)    收藏  举报