Markdown 语法总结【从入门到精通一篇就够了】

发布时间：2024年01月12日

??作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注?、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

文章目录

一、Markdown 简介
二、Markdown 应用
三、Markdown 概述
四、Markdown 基本语法
五、Markdown的高级用法
六、扩展语法
七、工具
八、总结

一、Markdown 简介


	Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。

二、Markdown 应用

Markdown 能被使用来撰写电子书，如：Gitbook。

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、CSDN、简书、掘金、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。

三、Markdown 概述

Markdown的核心目标是实现「易读易写」。

我们强调可读性，使得使用Markdown格式的文件能够直接以纯文本形式发布，而不会显得像是由大量标签或格式指令构成。Markdown语法受到多种text-to-HTML格式的影响，包括Setext、atx、Textile、reStructuredText、Grutatext和EtText。然而，Markdown的最大灵感来源于纯文本电子邮件的格式。

Markdown的语法由一些符号组成，这些符号经过精选，其作用一目了然。例如，在文字两旁加上星号看起来就像是强调。列表看起来就是列表。区块引用看起来真的像是引用一段文字，就像在电子邮件中常见的那样。

兼容HTML：
Markdown语法的目标是成为适用于网络的书写语言。

Markdown是一种轻量级标记语言，能将文本转换为有效的XHTML（或HTML）文档。其核心目标是实现易读易写，成为适用于网络的书写语言。

Markdown语法简洁明了，容易掌握，使写作变得高效而舒适。许多大型内容管理系统（CMS），如Joomla!、Drupal等，都能很好地支持Markdown。我个人是通过编写GitHub项目库中的Readme文件开始接触Markdown的。

Markdown并非旨在取代HTML，甚至不与之相近。它的语法种类相对较少，只对应HTML标记的一小部分。Markdown的构想并非旨在使HTML文档更容易编写，因为在我看来，HTML本身已经相当易于书写。

Markdown的理念在于让文档更易于阅读、编写和随意修改。HTML是一种发布的格式，而Markdown则是一种书写的格式。因此，Markdown的格式语法仅涵盖了纯文本可以覆盖的范围。

四、Markdown 基本语法

4.1 标题

在行首使用 1-6 个 # 字符，对应于标题级别 1-6。例如:

Markdown语法	HTML	预览效果
`# 一级标题`	`<h1>一级标题</h1>`	一级标题
`## 二级标题`	`<h2>二级标题</h2>`	二级标题
`### 三级标题`	`<h3>三级标题</h3>`	三级标题
`#### 四级标题`	`<h4>四级标题</h4>`	四级标题
`##### 五级标题`	`<h5>五级标题</h5>`	五级标题
`###### 六级标题`	`<h6>六级标题</h6>`	六级标题

还有一种写法
在文字下方加上任意个 ==，等于# 标题1；加上任意个 —，等于 ## 标题2
语法：

标题一
=========
标题二
---------

标题最佳实践：建议标题与上下的段落之间空一行或多行。不要靠的太近。

## 4.2 段落和换行符

Markdown是一种轻量级标记语言，旨在使文本的编写和阅读变得简单而直观。在Markdown中，段落是文本的基本结构单元，它通过一些简单的规则来定义。
段落的定义
在Markdown中，一个段落由一行或多行文本组成，相邻的文本行被视为同一个段落。段落之间通过空行来区分。
示例：

这是第一个段落。

这是第二个段落。

在这个例子中，两个文本行之间的空行表示两个段落的分隔。

在渲染时，上述Markdown文本将被解释为两个段落。段落的定义简单而直观，使得Markdown成为撰写文档和文章的理想选择。
Typora 段落快捷键：ctrl-0

折行简介

Markdown是一种轻量级标记语言，以其简洁易读的语法而闻名。在Markdown中，折行是指在文本中进行换行的方式。Markdown引擎通常会自动将文本中的软换行（\n）转换为HTML的硬换行（ ），从而实现文本在浏览器中正确换行显示。

折行的方法

结尾空格： 在句子结尾加入两个或更多空格，Markdown引擎会将其转换为硬换行。
```
这是一行文本  
这是下一行文本
```
反斜杠： 在文本结尾使用反斜杠\进行折行。
```
这是一行文本\
这是下一行文本
```
 标签： 直接使用HTML的 标签进行折行。
```
这是一行文本 
这是下一行文本
```

注意事项

尽管可以使用上述方法实现折行，但在现代Markdown引擎中，几乎都已经支持软换行转硬换行。因此，建议不要过多地使用结尾空格、反斜杠\或 标签，以保持Markdown的简洁性和易读性。

4.3 段首缩进

使用 Markdown 写文章不需要段首缩进。但如果确实有需要的话，可以在段落前面使用两个全角空格（space）。因为一个全角空格的宽度是整整一个汉字，输入两个全角空格正好是两个汉字的宽度。

一般的中文输入法都是按 shift-Space 切换到全角模式，输完两个空格后，再次按 shift-Space 回到正常输入状态。

4.4 引用

在Markdown中，引用文本的语法使用 > 符号。以下是引用文本的基本语法和一些示例：

基本引用
使用 > 符号表示引用，可以是单行或多行文本。

> 这是引用的文本。

效果如下：

这是引用的文本。

多行引用
引用可以包括多行文本，每行都以 > 开始。

> 这是引用的第一行。
> 这是引用的第二行。

效果如下：

这是引用的第一行。
这是引用的第二行。

嵌套引用
可以使用多个 > 符号来嵌套引用。

> 外层引用
> > 内层引用
> > > 更深层次引用

效果如下：

外层引用

内层引用

更深层次引用

引用包含其他Markdown元素
引用可以包含其他Markdown元素，如列表、代码块等。

> 这是一个引用包含的列表：
> - 项目1
> - 项目2
> 
> ```
> 这是引用包含的代码块。
> ```

效果如下：

这是一个引用包含的列表：

项目1
项目2
这是引用包含的代码块。

在Markdown中，引用通常用于引述他人的文字或用于突出一段文本。希望这些例子能帮助你理解Markdown中的引用语法。

4.5 分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。

语法： 三个或三个以上的 ‘-’ 或 ‘*’ 都可以格式如下：

* * *
***
*****
- - -

---------------------------------------

也可以使用html标签分割线
<hr>

效果如下： 以下的分割线对应上面的实例

4.6 文本样式

4.6.1 文本块居中

若想使图片或文本块居中，请使用：

语法：

<center>
居中文本块!
</center>

效果如下：

居中文本块!

4.6.2 设置文字颜色

字体颜色
蓝色的文本 如：蓝色的文本
可以使用不同的颜色如blue、red、green等
也可以使用十六进制值：如#0000FF表示蓝色。
蓝色的文本 如：蓝色的文本
提示: 17种标准颜色：浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。

4.6.3 设置文字字体

设置字体
我是黑体字
我们可以用css里面face 是个很老的属性了

常用字体里表

字体中文/英文	字体写法中文/英文	预览效果使用的是中文
黑体 SimHei	`<font face="黑体">我是黑体字</font>` `<font face="SimHei">SimHei</font>`	我是黑体字
宋体 SimSun	`<font face="宋体">我是宋体字</font>` `<font face="SimSun">SimSun</font>`	我是宋体字
新宋体 NSimSun	`<font face="新宋体">我是新宋体字</font>` `<font face="NSimSun">NSimSun</font>`	我是新宋体字
仿宋 FangSong	`<font face="仿宋">我是仿宋字</font>` `<font face="FangSong">FangSong</font>`	我是仿宋字
楷体 KaiTi	`<font face="楷体">我是楷体字</font>` `<font face="KaiTi">KaiTi</font>`	我是楷体字
仿宋_GB2312 FangSong_GB2312	`<font face="仿宋_GB2312">我是仿宋_GB2312字</font>` `<font face="FangSong_GB2312">FangSong_GB2312</font>`	我是仿宋_GB2312字
楷体_GB2312 KaiTi_GB2312	`<font face="楷体_GB2312">我是楷体_GB2312字</font>` `<font face="KaiTi_GB2312">KaiTi_GB2312</font>`	我是楷体_GB2312字
微软雅黑 Microsoft YaHei	`<font face="微软雅黑">我是微软雅黑字</font>` `<font face="Microsoft YaHei">Microsoft YaHei</font>`	我是微软雅黑字

4.6.4 设置文字大小

设置字体大小
我是尺寸
使用标签 size 属性修改局部字号 size最小值：1 size最大值：7
提示：结合使用 我是黑体，绿色，尺寸为4 如：我是黑体，绿色，尺寸为4

4.6.5 设置文字背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）。

语法：

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

效果如下：

背景色yellow

4.6.6 强调

文本样式表

Style语法	键盘快捷键	示例	输出
`加粗或 __加粗__`	Command+B (Mac) 或 Ctrl+B (Windows/Linux)	`这是粗体文本`	这是粗体文本
`斜体或 _斜体_`	Command+I (Mac) 或 Ctrl+I (Windows/Linux)	`这是斜体文本`	这是斜体文本
`~~删除线~~`	-	`~~这是错误文本~~`	~~这是错误文本~~
`粗体和 _嵌入的斜体_`	-	`此文本 _非常_ 重要`	此文本非常重要
`*全部粗体和斜体*`	-	`*所有这些文本都很重要*`	所有这些文本都很重要
`==文本高亮显示==`	-	`==文本高亮显示==`	文本高亮显示
`<sub>下标</sub>`	-	`<sub>This is a subscript text</sub>`	_{这是下标文本}
`<sup>上标</sup>`	-	`<sup>This is a superscript text</sup>`	^{这是上标文本}

4.6.7 键盘文本

使用 HTML 的 <kbd> 标签。
语法：

加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
使用：<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果如下：
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
使用：Ctrl+Alt+Del 重启电脑

4.7 列表

4.7.1 有序列表

要创建有序列表，请在订单项中添加数字和句点。数字不必按数字顺序排列，但列表应以数字开头。

Markdown语法	HTML	预览效果
1. First item 2. Second item 3. Third item 4. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 1. Second item 1. Third item 1. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 8. Second item 3. Third item 5. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Fourth item
1. First item 2. Second item 3. Third item ????1. Indented item ????2. Indented item 4. Fourth item	`<ol>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item` `<ol>` `<li>Indented item</li>` `<li>Indented item</li>` `</ol>` `</li>` `<li>Fourth item</li>` `</ol>`	First item Second item Third item Indented item Indented item Fourth item

4.7.2 无序列表

要创建无序列表，请在订单项前添加破折号（-），星号（*）或加号（+）。缩进一个或多个项目以创建嵌套列表。

Markdown	HTML	预览效果
- First item - Second item - Third item - Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
* First item * Second item * Third item * Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
+ First item * Second item - Third item + Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Fourth item
- First item - Second item - Third item ????- Indented item ????- Indented item - Fourth item	`<ul>` `<li>First item</li>` `<li>Second item</li>` `<li>Third item` `<ul>` `<li>Indented item</li>` `<li>Indented item</li>` `</ul>` `</li>` `<li>Fourth item</li>` `</ul>`	First item Second item Third item Indented item Indented item Fourth item

4.7.3 任务列表

任务列表是将项目标记为 [] 或 [x]（未完成或已完成）的列表。
语法：

- [ ] a task list item
  - [x] list syntax required
  - [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

效果如下：

a task list item
list syntax required
normal formatting, @mentions, #1234 refs

incomplete
completed

4.8 链接

4.8.1 常用链接

语法：

[链接名称](链接地址)
测试链接：[垃圾度娘点击跳转](https://www.baidu.com)

效果如下：

测试链接：垃圾度娘点击跳转

网址和Email地址
使用尖括号可以很方便地把URL或者email地址变成可点击的链接。

<https://www.baidu.com>
<ceshi@example.com>

效果如下：
https://www.baidu.com
ceshi@example.com

4.8.2 带格式化的链接

强调链接, 在链接语法前后增加星号。要将链接表示为代码，请在方括号中添加反引号。

Rotten Baidu **[BAIDU](https://www.baidu.com)**.

效果如下：

Rotten Baidu BAIDU.

4.8.3 定位超链接

定位超链接可跳转至同一页面上的指定位置。
语法：

指定位置 {#超链接标识}
[超链接文本](#超链接标识)

### 列表 {#link-basic}
[跳转至 -> 基本超链接](#link-basic)

效果如下：
跳转至 -> 列表

??：有的会不支持定位超链接所以可以了解一下

4.8.4 脚注超链接

脚注超链接可看作引用超链接与定位超链接的组合，可跳转至页尾或文末的脚注。

语法：

正文文本 [^脚注标识]
[^脚注标识]: 空格 脚注内容

说明：

脚注标识可以是数字或单词，但不能包含空格及制表符。
脚注标识仅在脚注符号与脚注内容间建立链接，在渲染时脚注按出现顺序编号。
脚注内容可放在除列表、引用以及表格等元素之外文档中的任何位置，在渲染时会统一放置在文末。

这里有一个示例脚注[^3]。
这里有第二个示例脚注[^label]。

效果如下：
这里有一个示例脚注¹。
这里有第二个示例脚注²。

??注意：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

4.9 代码块与语法高亮

插入程序代码的方式有两种：使用反引号 `（~ 键）、使用缩进（Tab）。

插入行内代码，即插入一个单词或者一句代码的情况，使用 `code` 这样的形式插入。
插入多行代码，分别使用三个反引号（```）包裹多行代码。或者使用缩进。

行内代码
在一般的段落文字中，可以使用反引号 ` 来标记或插入代码区段。当然也可以标记文件名、关键词等。

C语言里的函数 `scanf()` 怎么使用？

效果如下：
C语言里的函数 scanf() 怎么使用？

多行代码

在需要高亮的代码块的前一行及后一行使用三个反引号 ```（~ 键）
同时第一行反引号后面，输入代码块所使用的语言，实现代码高亮。

如果只要插入代码片段的话，可以用两个反引号`包裹起来（在键盘左上角）。

`print()`

如果想插入整段代码的话，可以用两个```（三个反引号）将代码块包裹起来，并且可以在下面markdown的位置指定其他语言类型。

```markdown
<!-- 源代码 --> 
```

比如高亮 python3 代码块：

语法：

```python
#!/usr/bin/env python3
print("Hello, World!");
```

效果如下：

#!/usr/bin/env python3
print("Hello, World!");

html 代码块
语法：

<pre markdown>
    <code>
    这是一段代码块
    </code>
</pre>

效果如下：

    
    这是一段代码块

4.10 表格

表格有两种写法，一种就是前后不加|，和前后加|。必须是最开始和结束中间的不能省略！下面写两种，第一种简单方式和第二种原生方式。效果和内容都能实现看个人习惯，小编喜欢用原生的！

在 Markdown 中，可以制作表格，例如：

表头          | 表头           | 表头
------------ | ------------- | ------------
普通表格      | 普通表格        | 普通表格

效果如下：

表头	表头	表头
普通表格	普通表格	普通表格

或者也可以让表格两边内容对齐，中间内容居中，例如：

|  表头  |   表头  |  表头  |
|:------|:-------:|------:|
| 左对齐 | 居中对齐 | 右对齐 |
| 左对齐 | 居中对齐 | 右对齐 |

效果如下：

表头	表头	表头
左对齐	居中对齐	右对齐
左对齐	居中对齐	右对齐

加:可以实现左对齐，右对齐，居中。不加则默认为左对齐。

使用 :—: 设置内容和标题居中对齐
使用 :— 设置内容和标题居左对齐
使用 —: 设置内容和标题居右对齐

4.11 图片

简单图片使用实例

简单图片	说明	实例
`![图片描述](图片链接)`	普通链接	`![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png)`
`[![图片描述](图片链接)](跳转链接)`	带跳转链接	`[![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png)](https://www.baidu.com)`
`<img src="图片链接">`	HTML代码	`<img src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png">`
`<img src="图片链接" alt="图片alt" title="图片title">`	HTML代码	`<img src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" alt="图片alt" title="图片title"`

注意图片描述可以不写

调整图片使用实例

调整图片位置	说明	实例
`#pic_center`	图片居中	`![图片描述](图片链接#pic_center)`
`#pic_left`	图片靠左	`![图片描述](图片链接#pic_left)`
`#pic_right`	图片靠右	`![图片描述](图片链接#pic_right)`
`align`	居中对齐： align = “middle” 靠左对齐： align = “left” 靠右对齐： align = “right”	align属于img标签属性，使用起来也简单例如： `<img src="图片链接" align = "right"/>`

注意图片描述可以不写,调整图片的位置追加在图片链接的后面
最好将 <img> 标签包裹在  . . . 标签内使用，可以实现更多、更好的效果。

调整图片尺寸使用实例

调整图片尺寸	说明	实例
`=70x50`	宽x高	`![图片描述](图片链接 =70x50)`
`width="100%`	html 横向占比	`<img src="图片链接" width="100%">`
`width="600`	html 宽度	`<img src="图片链接" width="600">`
`height="600`	html 高度	`<img src="图片链接" height="600">`

注意 =70x50等号 " = " 前面需要有一个空格
调整位置和尺寸，两个结合使用举几个例子：
<img src=“图片链接” align = “right” width=“600” />

使用html p标签显示复杂的照片

 <img src=“图片链接” width=“400” /> 

语法：

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png" width="400" />
</p>

效果如下：

带链接的地址做一个实例
语法：

[![这是图片](https://img-blog.csdnimg.cn/direct/6de94c45061d424f95dd253b6bce6ec9.webp)](https://www.baidu.com)

效果如下：

剧中图片实例
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png#pic_center ")

靠右图片实例
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png#pic_right)

固定尺寸的图片
![图片描述](https://img-blog.csdnimg.cn/direct/7f0ff407ecc846fca0067cbda23236bc.png =70x50)

效果图：用截图效果看起来比较直观

在这里插入图片描述

五、Markdown的高级用法

5.1 反引号嵌套

反引号就是`
想要在代码块中表示```（如上面 Code Groups 代码所示），代码为
在这里插入图片描述

例如我在本文写了很多代码的实例都需要嵌套如：

```python
#!/usr/bin/env python3
print("Hello, World!");
```

上面显示内容，下面的是我截图显示的，在这里我们可以看到最外层用了代码格式的嵌套，如果用三个`那么会发生冲突，所以我们在最外层加了`，这样嵌套成功并可以在代码块种显示出我们写的内容。

这里我放了一张自己写作时的一张截图，以便你们能更好的理解！ ??
在这里插入图片描述
简单来说，就是外层的反引号数要比内层的反引号数多一个（当然，严格来说只要内外层的反引号个数不同就行）请添加图片描述

5.2 上下角标

语法

使用 ^ ^ 进行上角标标注。
使用 ~ ~ 进行下角标标注。

例如：
- 19^th^
- H~2~O

效果如下：

19^th
H₂O

请添加图片描述

5.3 标记

语法

使用 == == 进行标记。请注意两边需要有空格。

案例

小北 ==十分== 帅

效果如下：
小北十分帅

请添加图片描述

5.4 折叠代码块

语法示例
在Markdown中，折叠代码块通常是通过HTML的details和summary标签实现的。以下是一个简单的例子：

<details>
<summary>点击展开/折叠代码块</summary>

```python
print("Hello, World!")
```
</details>

<details>
<summary>展开查看</summary>
	<pre><code>
	System.out.println("Hello to see U!");
	</code></pre>
</details>

效果如下：
请添加图片描述
提示折叠代码块部分博客不支持，其中就有CSDN。😂

请添加图片描述

5.5 数学公式

在Markdown中，你可以使用LaTeX语法来插入数学公式。以下是一些常用的Markdown公式的示例：

$...$ 或者 (…) 中的数学表达式将会在行内显示。
$$...$$ 或者 […] 或者 ```math 中的数学表达式将会在块内显示。

行内公式：$E = mc^2$

行块公式：
$$
i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.
$$

行内公式： $E = mc^2$

行块公式：
$i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} ( \frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} ) \psi + V \psi.$

请添加图片描述

5.6 流程图

Markdown流程图是一种通过简洁的文本语法来描述流程图的方式，它能够帮助你清晰地展示各种流程、决策和操作之间的关系。在Markdown中，你可以使用Mermaid语法来轻松绘制各种流程图。

语法示例
以下是一个简单的Markdown流程图示例，采用Mermaid语法：

```mermaid
graph TB;
    A[开始] --> B[流程步骤1];
    B --> C[流程步骤2];
    C --> D[决策];
    D -- 是 --> E[执行操作1];
    D -- 否 --> F[执行操作2];
    E --> G[结束];
    F --> G;
```

流程方向：

符号/术语	含义
TB	从上到下（Top to Bottom）的流程方向
BT	从下到上（Bottom to Top）的流程方向
LR	从左到右（Left to Right）的流程方向
RL	从右到左（Right to Left）的流程方向
HZ	水平方向（Horizontal）的流程方向
VT	垂直方向（Vertical）的流程方向

说明：

graph TD;：指定这是一个有向图。
节点以及节点之间的关系通过-->来表示。
方框中的文字表示节点的名称，例如A[开始]表示开始节点。
决策节点后接两条分支线，分别表示决策的两个选项。
流程图的开始和结束通过特殊节点开始和结束表示。

效果如下：

在上述示例中，我们定义了一个简单的流程图，包括开始、流程步骤1、流程步骤2、决策、执行操作1、执行操作2和结束等节点，以及它们之间的关系。

请添加图片描述

5.7 时序图

时序图是一种UML图表，用于展示系统中对象之间的交互，特别关注对象之间消息的传递和状态的变化。在Markdown中，你可以使用特定的语法结构来轻松地绘制时序图，这通常需要依赖外部工具支持，比如PlantUML或Mermaid。

Mermaid是另一个流行的图表工具，同样支持时序图。以下是一个使用Mermaid的时序图示例：

```mermaid
sequenceDiagram
    participant Alice
    participant Bob

    Alice->>Bob: 消息1
    Bob-->>Alice: 消息2
```

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
—>>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
-x	末端为叉的虚线（表示异步）
-)	末端带有开放箭头的实线 (异步)
–)	末端带有开放箭头的虚线 (异步)

说明：

sequenceDiagram：定义一个时序图。
participant：定义参与者。
-->：表示消息的发送方到接收方的方向。

效果如下：

请添加图片描述

5.8 循序图

Markdown循序图是一种通过简单的文本语法描述交互过程的方式，它用于展示系统中不同部分之间的消息传递顺序。在Markdown中，你可以使用Mermaid语法来轻松地创建各种循序图。

在绘制时序图和循序图时，它们都是 UML（Unified Modeling Language）中用于描述系统交互的图形化工具。尽管它们在某些方面相似，但它们有一些关键区别：

时序图 强调消息的时间顺序，具体到消息的发送和响应。
循序图 更注重对象之间的交互和通信，不强调消息的时间顺序，更偏向于展示对象之间的整体协作。

时间轴表示方式：
时序图（Sequence Diagram）： 时序图强调的是消息在参与者之间的时间顺序，以及消息的传递顺序。在时序图中，垂直的时间轴通常沿着图的顶部，而消息的流向则从上到下。
循序图（Communication Diagram）： 循序图更注重对象之间的协作和通信。在循序图中，没有明确的时间轴，而是通过箭头的方向和顺序来表示消息的传递。

参与者排列：
时序图： 通常以水平或垂直方向排列参与者，表示消息的传递方向。
循序图： 通常以水平方向排列参与者，更强调对象之间的交互。

消息表示：
时序图： 强调消息的时间顺序，可以清晰地看到消息在不同参与者之间的传递。
循序图： 更注重对象之间的交互和通信，不强调消息的时间顺序。

使用场景：
时序图： 适用于强调交互中消息的时间顺序，特别是在强调同步执行和异步消息的情况下。
循序图： 更适用于展示对象之间的整体协作和通信，不强调消息的时间顺序。

语法示例
以下是一个简单的Markdown循序图示例，采用Mermaid语法：

```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 系统

    A->>B: 请求数据
    B-->>A: 返回数据
    A->>B: 发送指令
    B-->>A: 执行指令
```

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
—>>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
-)	末端带有开放箭头的实线 (异步)
–)	末端带有开放箭头的虚线 (异步)

说明：

sequenceDiagram：指定这是一个循序图。
participant关键字用于定义参与交互的角色，例如participant A as 用户表示用户是一个参与者。
A->>B: 请求数据表示A向B发起请求数据的消息。
B-->>A: 返回数据表示B向A返回数据的消息。

效果如下：

来个复杂的例子吧！

```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
张三 ->> 李四: 他们是朋友？
李四 -->>王五: 你最近怎么样，王五？
李四 --x 张三: 我很好，谢谢!
李四 -x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

loop 回调自身
    李四->>李四: 自己爱自己
end
alt 回调其他
    李四->>王五: 我需要你
end
opt title
    赵六->>王五: 我需要你
    赵六 -->> 李四: 李四你呢
end
李四-->>张三: 打量着王五...

张三->> 王五: 很好... 王五, 你怎么样?
王五->> 张三: 很好... 王五, 你怎么样?
```

效果如下：

在上述示例中，我们定义了一个简单的循序图，包括用户（A）和系统（B）之间的消息传递过程。用户发送请求数据的消息，系统接收并返回数据，然后用户再发送指令，系统执行并返回结果。

请添加图片描述

5.9 甘特图

甘特图是一种项目计划图，以时间为基准，用于显示项目中各个任务的开始和结束日期。在Markdown中，你可以使用Mermaid语法轻松绘制甘特图。

语法示例
Markdown 甘特图通常使用 Mermaid 这样的工具来实现。以下是一些基本的语法元素：

```mermaid
gantt
title 这是个甘特图的栗子🌰
dateFormat MM-DD
section 软件协同开发课程
项目启动 :done,des1,03-09,7d
项目计划 :done,des2,after des1,6d
需求分析 :done,des3,after des2,9d
软件设计 :done,des4,after des3,12d
软件编码 :crit,active,des5,04-07,20d
软件测试 :des6,04-14,15d
项目交付 :des7,after des6,4d
```

说明：

gantt：指定这是一个甘特图。
title：设置甘特图的标题。
dateFormat：指定日期的格式。
section：定义一个项目阶段。
任务条目包括任务名称、状态（如done、active等）、描述、开始日期和持续时间。

在上面的示例中，我们展示了一个简单的软件协同开发课程的甘特图，其中包括项目启动、项目计划、需求分析、软件设计、软件编码、软件测试和项目交付等阶段。

通过使用Markdown的甘特图语法，你可以清晰地展示项目的时间轴和各项任务的关系，使项目计划更加直观和易于理解。

效果如下：

请添加图片描述

5.10 类图

Markdown类图是一种用简单文本语法描述系统中类和它们之间关系的方式。使用Mermaid语法，你可以轻松地在Markdown中创建各种类图。

语法示例
以下是一个简单的Markdown类图示例：

```mermaid
classDiagram
    class Animal {
        +name: String
        +eat(): void
    }

    class Dog {
        +bark(): void
    }

    class Cat {
        +meow(): void
    }

    Animal <|-- Dog
    Animal <|-- Cat
```

说明：

classDiagram：指定这是一个类图。
class关键字用于定义类，例如class Animal表示定义了一个Animal类。
在类的花括号内部，你可以定义类的属性和方法。例如，+name: String表示类有一个名为name的字符串属性，+eat(): void表示类有一个名为eat的无返回值方法。
Animal <|-- Dog和Animal <|-- Cat表示Animal类是Dog和Cat类的父类。

在上述示例中，我们定义了一个简单的类图，包括Animal、Dog和Cat三个类，展示了它们之间的继承关系。Animal类是Dog和Cat类的父类，而每个类都有自己的属性和方法。

效果如下：

请添加图片描述

5.11 状态图

Markdown状态图是一种通过简单的文本语法描述系统中状态及其之间转换关系的方式。使用Mermaid语法，你可以轻松地在Markdown中创建各种状态图。

语法示例
以下是一个简单的Markdown状态图示例：

```mermaid
stateDiagram
    [*] --> State1
    State1 --> [*]
    State1 : this is a string
    State1 : this is another string

    State1 --> State2
    State2 --> [*]
```

说明：

stateDiagram：指定这是一个状态图。
[*]：表示初始状态和结束状态。
State1和State2：表示系统中的具体状态。
State1 : this is a string和State1 : this is another string：在状态上方显示字符串注释。
State1 -> State2：表示状态之间的转换关系。

在上述示例中，我们定义了一个简单的状态图，包括两个状态（State1和State2）以及它们之间的转换关系。初始状态为[*]，系统从初始状态开始，经过一系列状态转换，最终回到结束状态[*]。

效果如下：

请添加图片描述

5.12 关系图

Markdown中的关系图通常用于表示各种元素之间的连接和依赖关系。这些图形可以包括节点和连接线，帮助读者更清晰地理解各个元素之间的相互关系。

语法示例
以下是一个使用Mermaid语法创建的简单关系图实例，表示一个简单的网络拓扑结构：

```mermaid
graph TD
    A[Internet] -->|Requests| B[Server]
    B -->|Processes| C[Database]
    C -->|Returns| B
```

说明：
在这个示例中，节点A代表互联网，节点B代表服务器，节点C代表数据库。箭头表示数据流动的方向，帮助观察者理解这些元素之间的关系。

效果如下：

请添加图片描述

5.13 用户日记图

用户日记图是一种流程图，专注于展示用户与系统之间的交互过程和步骤。这种图表以用户的角度出发，描述用户在使用系统时的行为和决策流程。通过用户日记图，你可以更好地理解用户与系统之间的关系，有助于提高用户体验设计的质量。

语法示例

以下是一个使用Mermaid语法创建的简单用户日记图实例，表示一个用户在购物应用中的购物流程：

```mermaid
journey
title My working day
section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me
```

说明：
在这个示例中，用户从查看商品开始，然后将商品添加到购物车，编辑购物车后进行结算下单，最终完成支付。这种用户日记图清晰地展示了用户在购物应用中的交互流程。

效果如下：

请添加图片描述

5.14 饼图

饼图（Pie Chart）是一种常见的数据可视化图表，用于展示数据的相对比例。它通常呈圆形，被划分成扇形，每个扇形的面积或角度表示相应数据的占比。饼图适用于展示数据的相对部分与整体的关系，尤其在展示分类数据的分布方面效果显著。

饼图的特点和用途

数据比例展示： 饼图直观地展示了各个部分在整体中的比例，使观众能够快速了解不同类别的相对大小。
简洁易懂： 饼图的简单结构使其易于理解，是一种简洁直观的数据呈现方式，适用于广泛的受众。
单一数据集： 饼图适合展示单一数据集的相对比例，不宜用于多个数据集的对比。

饼图的语法
使用Markdown语法表示饼图的方式取决于所使用的图表库。绘制饼图的语法如下：

```mermaid
pie
   title 看文章经常点赞的程序员的脱单情况
  "类别A" : 25
  "类别B" : 30
  "类别C" : 20
  "类别D" : 25
```

说明：
在这个实例中，我们展示了四个类别（A、B、C、D）的数据分布情况。类别B占比最大，为30%，而类别C占比最小，为20%。这种图表形式使用户能够迅速了解各类别在整体中的相对重要性。

效果如下：

六、扩展语法

文章目录

语法

[toc]

文章目录特别简单在自己写的文章最上面加上[toc]

请添加图片描述

使用Emoji表情

在Markdown中，可以通过Emoji表情来增添文本的情感色彩或表达更直观的含义。Emoji是一种图形符号，广泛应用于各种通信平台和文档中。

Emoji的基本语法

在Markdown中，使用Emoji表情的语法很简单，只需在文本中插入相应的Emoji字符即可。以下是一些基本的Emoji表情及其对应的语法：

笑脸： 😊 :smile:
心心： ?? :heart:
大笑： 😄 :laughing:
太阳： ?? :sunny:

Emoji实例

以下是一个Markdown中使用Emoji表情的实例：

# 今天的心情 😊

我感觉今天的天气真的很好！?? 太阳明媚，心情格外愉快。希望每个人都有一个美好的一天！🌞

> "笑脸是最短的距离，连接人与人之间的桥梁。" 😄

实例说明：

在这个实例中，通过Emoji表情表达了作者今天的心情和对美好天气的感受。这种语法使文本更富有情感，增添了一些轻松愉快的氛围。

更多的表情链接：Markdown Emoji 表情大全
更多的表情链接：Emoji 参考手册

请添加图片描述

内嵌 HTML 标签

在Markdown中，你可以通过内嵌HTML标签来实现更复杂的排版和样式。以下是一些基本的HTML标签以及如何在Markdown中使用它们的例子：

加粗文本：
```
This text is bold
```
斜体文本：
```
This text is italicized
```

超链接：

<a href="https://www.example.com">Visit our website</a>

图片：
```
<img src="image.jpg" alt="Image">
```

无序列表：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

请注意，使用HTML标签可能会使Markdown文本在某些纯文本编辑器中显示不同，因此建议在支持HTML的Markdown渲染器中查看效果。

语法示例

<table>
    <tr>
        <td>小北编程</td>
    </tr>
</table>

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

效果如下：

小北编程

值班人员	星期一	星期二	星期三
值班人员	张三	李四	王五

如果想要调整文字位置可以使用，align 属性规定表格的表头单元格中内容的水平对齐方式。

语法

<th align="center">

属性值

值	描述
left	左对齐内容（默认值）。
right	右对齐内容。
center	居中对齐内容。
justify	对行进行伸展，这样每行都可以有相等的长度（类似于报纸和杂志）。
char	将内容对准指定字符。

请添加图片描述

转义字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

字符	名称
\	反斜杠（backslash）
`	反引号（backtick）
*	星号（asterisk）
_	下划线（underscore）
{ }	花括号（curly braces）
[ ]	方括号（brackets）
< >	尖括号（angle brackets）
( )	圆括号（parentheses）
#	井号（pound sign）
+	加号（plus sign）
-	减号（minus sign）
.	句点（dot）
!	感叹号（exclamation mark）
\|	管道符（pipe）

在Markdown中，使用反斜杠可以让这些字符显示而不被解释为Markdown语法的一部分。希望这份整理对你有帮助！

七、工具

国内博客平台：CSDN、简书、掘金、博客园、知乎等。
这些自带的编辑工具支持的都不错，可以直接使用。当然也可以使用本地的软件编辑。
本地 Typora、Sublime Text、TEXTS
在线 markdown、CodeMirror
还有很多如VSCode等编程软件都很好的支持了Markdown，好了不多说了根据自己的爱好选择吧。

八、总结

在这里，我想分享一下，这篇文章从整理到最后的完稿，花费了好多天的心血和努力。有时候确实会想要偷懒，不想再写下去，但是每当看到过去的文章受到大家的关注、点赞、以及收藏，就仿佛得到了一种强大的动力。你们的支持是我坚持写作的动力源泉。我不敢说这篇文章写得最好，但我敢说，我尽可能做到了最全面。

如果您喜欢这篇文章，希望大家可以给予👉关注?点赞👍以及收藏📂。你们的每一次支持都是我写作的动力，也是对我最大的鼓励。感激之情溢于言表，谢谢大家！💖

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！

演示注脚内容
语法：

[^3]: 这是第一个示例脚注的内容。 
[^label]: 这是第二个示例脚注的内容。

效果如下：

这是第一个示例脚注的内容。 ??
这是第二个示例脚注的内容。 ??

文章来源:https://blog.csdn.net/u014696856/article/details/135480465
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

Markdown 语法总结【从入门到精通一篇就够了】

文章目录

一、Markdown 简介

二、Markdown 应用

三、Markdown 概述

四、Markdown 基本语法

4.1 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

4.3 段首缩进

4.4 引用

4.5 分割线

4.6 文本样式

4.6.1 文本块居中

4.6.2 设置文字颜色

4.6.3 设置文字字体

4.6.4 设置文字大小

4.6.5 设置文字背景色

4.6.6 强调

4.6.7 键盘文本

4.7 列表

4.7.1 有序列表

4.7.2 无序列表

4.7.3 任务列表

4.8 链接

4.8.1 常用链接

4.8.2 带格式化的链接

4.8.3 定位超链接

4.8.4 脚注超链接

4.9 代码块与语法高亮

4.10 表格

4.11 图片

五、Markdown的高级用法

5.1 反引号嵌套

5.2 上下角标

5.3 标记

5.4 折叠代码块

5.5 数学公式

5.6 流程图

5.7 时序图

5.8 循序图

5.9 甘特图

5.10 类图

5.11 状态图

5.12 关系图

5.13 用户日记图

5.14 饼图

六、扩展语法

文章目录

使用Emoji表情

内嵌 HTML 标签

转义字符

七、工具

八、总结