这是一篇讲解 Markdown 基础语法的文章,内容基于 GitHub Flavored Markdown Spec,仅以实例的方式展示 GFM 所约定的 Markdown 语法,简单易懂。


1 导语

Markdown 是一种用于结构化文档编写的轻量级 「标记语言」 ,它使用简洁、高效的语法替代排版,令使用者专注于写作。 Markdown 语法的掌握极其简易,学习成本低,可谓一劳永逸,目前也被越来越多的写作爱好者,撰稿人及程序设计人员广泛使用。


2 基础语法

2.1 字体设置

输入内容显示效果表现形式
正常的文字正常的文字
*倾斜的文字*倾斜的文字斜体
_倾斜的文字_倾斜的文字斜体
**加粗的文字**加粗的文字粗体
***倾斜并加粗的文字***倾斜并加粗的文字斜体加粗
被删的文字被删的文字删除线

2.2 分级标题

多级标题

关于 ATX 风格标题和 Setext 风格标题

本文只展示 ATX 风格标题,关于 Setext 风格标题的介绍请参考 GFM Setext headings 说明

2.3 引用

引用: 在整个段落的第一行行首加上大于号「>」。

输入内容:

1
> 这是一段被引用的文字。

显示效果:

这是一段被引用的文字。

2.4 列表

2.4.1 无序列表

使用星号「*」,加号「+」或者减号「-」 表示无序列表。

输入内容:

1
2
3
4
5
6
7
- 项目 1
    - 分项目 1
    - 分项目 2
- 项目 2
    - 分项目 1
    - 分项目 2
- 项目 3

显示效果:

  • 项目 1
    • 分项目 1
    • 分项目 2
  • 项目 2
    • 分项目 1
    • 分项目 2
      • 子项目 a
      • 子项目 b
  • 项目 3

2.4.2 有序列表

输入内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
1. 项目 1
    1. 项目 A
    2. 项目 B
        一些说明
        1. 项目 a
        2. 项目 b
        3. 项目 c
    3. 项目 C
2. 项目 2
3. 项目 3

显示效果:

  1. 项目 1
    1. 项目 A
    2. 项目 B 一些说明
      1. 项目 a
      2. 项目 b
      3. 项目 c
    3. 项目 C
  2. 项目 2
  3. 项目 3

2.5 表格

输入内容:

1
2
3
4
5
| 姓名 | 性别 | 分数  |
| :----| :----:|-----: |
| 小明 | 男  | 59  |
| 小红 | 女  | 86  |
| 小白 | 男  | 100 |

显示效果:

姓名性别分数
小明59
小红86
小白100

2.6 分割线

单独在一行中使用三个或者更多的星号(*)、减号(-)或者下划线(_)来创建分割线

输入内容:

1
2
3
***
---
___

显示效果(三种输出效果相同):




2.7 代码块

代码块通常利用反引号「`」(位于Esc键下方,与中文符号「~」同键位)包裹代码。

行内代码: 如果在一行内需要引用代码,仅需用反引号 「`」 包括即可。

输入内容显示效果
这是一个例子 `代码`这是一个例子 代码

多行代码: 上下每行各使用3个反引号「`」将代码包裹。

输入内容:

1
2
3
4
5
6
7
    ```html
        <html>
            <head>
                <title>Test</title>
            </head>
        </html>
    ```

显示效果:

1
2
3
4
5
<html>
    <head>
        <title>Test</title>
    </head>
</html>

关于缩进式代码块和围栏式代码块

本文只展示围栏式代码块,关于缩进式代码块的介绍请参考 GFM Indented code blocks 说明

2.8 链接与图片

2.8.1 链接

Markdown 中,插入链接不需要其它按钮,仅需使用 [显示文本](链接地址) 这样的语法即可,例如:

输入内容:

1
[知乎](https://www.zhihu.com)

显示效果:

知乎

2.8.2 图片

Markdown 中,插入链接不需要其它按钮,仅需使用 ![图片标题](链接地址) 这样的语法即可,例如:

输入内容:

1
![天道酬勤](https://i.loli.net/2019/12/13/Xa29DCqge8hEonr.jpg)

显示效果:

天道酬勤

关于图片与链接的语法

注:插入链接的语法与图片的语法很相似,只是前面多了一个「!」。


3 常用技巧

3.1 换行

创建换行符,请以两个或多个空格键结束一行,然后键入Enter(回车键)。

输入内容:

1
2
这是第一行<空格><空格>
这是第二行

显示效果:

这是第一行
这是第二行

3.2 缩进字符

数字缩进字母缩进显示效果表现形式
未缩进未缩进未缩进未缩进
&#160;缩进1/4中文&\nbsp;缩进1/4中文 缩进1/4中文缩进1/4中文
&#8194;缩进1/2中文&\ensp;缩进1/2中文 缩进1/2中文缩进半个中文,1字符
&#8195;缩进1个中文&\emsp;缩进1个中文 缩进1个中文缩进1个中文,2字符

3.3 转义字符

使用反斜杠转义以下字符:

输入内容字符名称
\\\反斜杠
\``反引号
\**星号
\__下划线
\ {\ }{}大括号
\ [\ ][]中括号
\ (\ )()括号
\##井号
\++加号
\-\---减号(连字符)
\..
\!!感叹号
\||竖线

3.4 链接的进阶操作

123

3.5 Emoji 表情符号

123


4 进阶用法

4.1 制作待办清单

输入内容:

1
2
3
4
5
6
7
8
9
- [ ] 任务 1
    * [X] 任务 A
    - 任务 B
        + [ ] 任务 a
        * [ ] 任务 b
        - [X] 任务 c
    + [X] 任务 C
+ [ ] 任务 2
* [X] 任务 3

显示效果:

  • 任务 1
    • 任务 A
    • 任务 B
      • 任务 a
      • 任务 b
      • 任务 c
    • 任务 C
  • 任务 2
  • 任务 3

4.2 编写数学公式

注意

本项非 Markodwn 原生功能,借助 KaTex 实现,使用及安装参考KaTex 文档

4.2.1 行内公式

行内公式:\( x + y = z \)

4.2.2 行间公式

行间公式:

$$SSIM(x,y)=\frac{\left(2\mu_x\mu_y+c1\right)\left(\sigma_{xy}+c2\right)} {\left(\mu_x^2+\mu_y^2+c1\right)\left(\sigma_x^2+\sigma_y^2+c2\right)}$$

$$\hat{y} = \mathop{\argmax}_{y \in GEN(x)}{\mathbf{w} \cdot \Phi(x, y)}$$

4.3 绘制流程图

注意

本项非 Markodwn 原生功能,借助 Mermaid 实现图形插入,使用及安装参考Mermaid 入门

示例:

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

4.4 绘制时序图

注意

本项非 Markodwn 原生功能,借助 Mermaid 实现图形插入,使用及安装参考Mermaid 入门

示例:

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

4.5 绘制甘特图

注意

本项非 Markodwn 原生功能,借助 Mermaid 实现图形插入,使用及安装参考Mermaid 入门

示例:

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

4.6 绘制状态图

注意

本项非 Markodwn 原生功能,借助 Mermaid 实现图形插入,使用及安装参考Mermaid 入门

示例:

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

4.7 绘制商业数据图表

注意

本项非原生 Markodwn 功能,借助 Apache ECharts 实现图形插入,使用教程参考5 分钟上手 ECharts

示例: