【Markdown常用语法总结】

一、Markdown简介

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。Markdown支持HTML语法。

二、Markdown常用语法

2.1 文章目录

2.1.1 TOC方法

TOC全称为Table of Content，自动列出全部标题。在文章开头使用[TOC]即可自动生成文章目录。

2.1.2 手动生成目录

将「列表」和「页内超链接」相结合，但有些Markdown编辑器不支持，有点类似于HTML的锚点。
语法格式：

[目录名](#标题链接)

规则：

标题链接格式为：一个#+被链接标题。
标题链接中不能出现大写字母，大写字母用小写字母代替。
标题链接中不能出现空格，空格用-代替。
目录排布由有序列表或无序列表控制
跳转与目录名无关，标题和标题链接符合规则即可

例子（只在VsCode上测试可行）：

// 目录
[1 一级标题](#1-一级标题)
[1.1 二级标题](#11-二级标题)
[1.2 二级标题](#12-二级标题-title)
[1.3 二级标题](#13-二-级-标-题-space-test)
// 标题
# 1 一级标题
## 1.1 二级标题
## 1.2 二级标题 Title
## 1.3 二 级 标 题 Space Test

2.2 标题

使用#号表示1~6级标题，一级标题对应一个#号，二级标题对应两个#号，以此类推。#号与标题名之间要保留一个空格。语法格式：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果就不展示了，会影响整篇文章目录结构

2.3 段落

2.3.1 首行缩进

Markdown的段落没有特殊的格式，书写中文时，需要首行空两格，可通过&emsp;实现，一个&emsp;即为一个中文字符的宽度。语法格式：

&emsp;&emsp;首行空两格

显示效果如下：

首行空两格
第二行

&ensp;：占据的宽度正好是半个中文宽度
&emsp;：占据的宽度正好是1个中文宽度

2.3.2 字体

2.3.2.1 字体加粗

使用2个*号或者下划线_表示粗体。语法格式：

**粗体样式文字**
__粗体样式文字__

显示效果如下：

粗体文字
粗体文字

2.3.2.2 斜体

使用1个*号或者下划线_表示斜体。语法格式：

*斜体样式文字*
_斜体样式文字_

显示效果如下：

斜体样式文字
斜体样式文字

2.3.2.3 粗斜体

使用3个*号或者下划线_表示粗斜体。语法格式：

***粗斜体样式文字***
___粗斜体样式文字___

显示效果如下：

粗斜体样式文字
粗斜体样式文字

2.3.2.4 删除线

使用2个~号表示删除线。语法格式：

~~删除样式文字~~

显示效果如下：

~~删除样式文字~~

2.3.2.5 下划线

下划线可通过HTML的<u>标签来表示。语法格式：

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

显示效果如下：

带下划线文本

2.3.2.6 字体颜色

字体颜色可通过HTML的<font>标签来表示。语法格式：

// 0x######表示0x000000~0xFFFFFF之间任意数值，也可以是red, green, bule等表示颜色的英文单词
<font color="0x######">字体颜色</font>

显示效果如下：

红色字体

2.3.2.7 字体大小

字体大小也可通过HTML的<font>标签来表示。语法格式：

<font size=5>字体大小</font> 					// size范围要求在[0, 7]，数字越大，字体越大，超过7，按最大字体显示
<span style="font-size:#px;">字体大小</span>		// #号表示任意整数，可任意设置像素字体的大小

显示效果如下：

字体大小

2.3.2.8 字体高亮

字体高亮可通过2对=号实现，也可通过HTML的<mark>标签来表示.语法格式：

==字体高亮==
<mark>字体高亮</mark>

显示效果如下：

字体高亮
字体高亮

2.3.3 分隔线

使用3个或3个以上连续的*号、-号、_号表示分隔线。语法格式：

***
---
___

显示效果如下：

2.3.4 换行

在需要换行的位置中添加<br>标签，即可达到换行的效果。语法格式：

明月几时有，<br>把酒问青天。<br>不知天上宫阙，<br>今夕是何年。

显示效果如下：

明月几时有，
把酒问青天。
不知天上宫阙，
今夕是何年。

2.3.5 文字居中

文字居中可通过HTML的<div>标签实现。语法格式：

<div align=center>文字居中显示</div>

显示效果如下：

文字居中显示

同理，文字居左，居右也可通过该方式实现，只需将align的值替换成left，right。

2.4 脚注

脚注是对文本的补充说明。语法格式：

脚注一[^footNote1]
脚注二[^footNote2]
[^footNote1]: 脚注一的内容
[^footNote2]: 脚注二的内容

显示效果如下：

脚注一¹
脚注二²

2.5 列表

Markdown支持有序列表和无序列表。

2.5.1 有序列表

有序列表直接在文字有加上1. 2. 3. 来表示，符号和文字之间加上一个空格字符。语法格式：

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

显示效果如下：

第一项
第二项
第三项

2.5.2 无序列表

无序列表无序列表使用星号(*)、加号(+)或者减号(-)作为标记。语法格式：

* 第一项
* 第二项

+ 第一项
+ 第二项

- 第一项
- 第二项

显示效果如下：

第一项
第二项

2.5.3 列表嵌套

列表嵌套只需在子列表的选项前添加四个空格即可。语法格式：

1. 第一项
	- 第一个元素
	- 第二个元素
2. 第二项
	- 第一个元素
	- 第二个元素

显示效果如下：

第一项
第一个元素
第二个元素

第二项
第一个元素
第二个元素

2.6 引用

在段落开头使用>符号，后面紧跟着一个空格符号，来表示引用。需要多级引用，则使用多个>符号。语法格式：

> 一级引用
>> 二级引用

显示效果如下：

一级引用

二级引用

2.7 代码框

如果是一个函数或者一行代码，可以使用1对 ` 号将其包起来。语法格式：
```
  `fun()`函数
```
显示效果如下：

fun()函数
如果是一段代码，代码量较多，可以使用连续的3对 ` 号将其包起来，并且可以指定一种语言。语法格式：
```
  ```cpp
  int main()
  {
  	std::cout << "Hello Markdown";
  }
  ```
```
显示效果如下：
```
int main()
{
	std::cout << "Hello Markdown";
}
```

2.8 链接

语法格式：

[链接名称](链接地址)		// [CSDN主页](https://www.csdn.net)
<链接地址>				// <https://www.csdn.net>

显示效果如下：

CSDN主页
 https://www.csdn.net

2.9 图片

语法格式：

· ![图片描述](图片链接) 		// 图片链接：可以网络图片地址，也可以是本地图片地址。本地图片地址的路径方向为/

· ![图片描述](data:image/png;base64,Base64编码文本)	// 图片转为Base64编码显示

· ![图片描述][图片资源]
  // 放在文章末尾
  [图片资源]:data:image/png;base64,Base64编码文本

图片居左显示。图片链接后加上#pic_left，如：![CSDN图标](https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png#pic_left)，也可通过HTML的<div>标签实现，语法格式：<div align=left><img src="https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png"></div>。
显示效果如下：

图片居中显示。图片链接后加上#pic_center，如：![CSDN图标](https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png#pic_center)，也可通过HTML的<div>标签实现，语法格式：<div align=center><img src="https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png"></div>。
显示效果如下：

图片居右显示。图片链接后加上#pic_right，如：![CSDN图标](https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png#pic_right)，也可通过HTML的<div>标签实现，语法格式：<div align=right><img src="https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png"></div>。
显示效果如下：

扩展： 需要设置图片宽高，可通过HTML的<div>标签实现，增加width，height项实现，如：<div align=left><img width="100" height="50" src="https://img-blog.csdnimg.cn/img_convert/da0d7042b2fbfc13929ddda265ef2da6.png"></div>

2.10 表格

Markdown制作表格使用|来分隔不同的单元格，使用-来分隔表头和其他行。
对齐方式：

:---- 设置内容和标题栏左对齐
:---: 设置内容和标题栏居中对齐
----: 设置内容和标题栏右对齐

语法格式：

| 表 头 1 | 表 头 2 | 表头3 |
| :-----: | :----- | ----: |
| 居中对齐 | 左对齐 | 右对齐 |

显示效果如下：

表头 1 表头 2 表头3
居中对齐左对齐右对齐

表头 1	表头 2	表头3
居中对齐	左对齐	右对齐

注：也可使用HTML的<table>标签来创建表格，可以实现单元格合并等一些较为复杂的操作。

2.11 锚点

Markdown的语法是不支持锚点的，但可以使用HTML的锚点语法，实现页面中跳转。语法格式：

<a href="#jump">链接说明文字</a>
在需要跳转到的位置增加如下代码：
<a id="jump">跳转</a>

显示效果如下：

<a href="#test">跳转到：测试</a>
| -
| --
| ---
| ----
| -----
| ------
<a id="test">测试</a>

跳转到：测试
| -
| –
| —
| ----
| -----
| ------
测试

2.12 上标与下标

使用^号表示上标，使用~号表示下标。语法格式：

文本^上标^
文本~下标~

显示效果如下：

文本^上标
文本_下标

2.13 待办事项

待办事项使用- [ ]形式表示，-与[之间，]与文本之间需要使用空格隔开，中括号[]内，使用空格表示计划任务，字母x表示已完成任务。语法格式：

- [ ] 计划任务
- [x] 已完成任务

显示效果如下：

计划任务
已完成任务

附：参考文档

Markdown图表用法
- https://blog.csdn.net/ZTH_G/article/details/130037570

脚注一的内容 ↩︎
脚注二的内容 ↩︎