Markdown从入门到进阶【保姆级】

Markdown从入门到进阶【保姆级】

一、了解Markdown

Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式来编写文档，然后转换成有效的XHTML（或者HTML）文档。Markdown语言吸收了很多在电子邮件中已有的纯文本标记的特性，具有简洁、易读、易写的特点，并且对于图片、图表、数学式都有支持。
Markdown的主要用途是编写格式简单的文本，它可以被转化成HTML或其他格式，因此被广泛用于博客、论坛、笔记、文档等场景，也用于写作说明文件、项目文档、规范文档等。
由于Markdown的轻量化、易读易写特性，许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。国外的GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等；国内的CSDN、简书、掘金、博客园、知乎等。同时，Markdown也有许多常用的编辑器，如Typora、Sublime Text和Visual Studio Code等，这些编辑器支持Markdown的实时预览和多种主题，使得编写和预览Markdown文档变得更加方便。

二、工具准备

本文章演示基于Typora编辑器

我们可以在Typora中设置以下偏好设置：

可以在Typora右下角关闭拼写检查

此外Typora还为我们提供了多种主题

三、快捷键

功能	快捷键
加粗(Bold)	Ctrl + B
斜体(italic)	Ctrl + I
引用(quote)	Ctrl + Q
插入链接(link)	Ctrl + L
有序列表(ordered)	Ctrl + O
无序列表(unordered)	Ctrl + U
插入代码	Ctrl + K
插入图片	Ctrl + G
提升标题	Ctrl + H
横线	Ctrl + R
撤销	Ctrl + Z
重做	Ctrl + Y
查找	ctrl + F
n级标题	ctrl + n
段落	ctrl + 0
专注者模式	F8
打字机模式	F9
源代码模式	ctrl + /

四、基础语法

加粗

在强调字体前后加上**符号(注意字体前后不要有空格，以下语法皆是！！！)

**强调字体**

效果如右：强调字体

斜体

在强调字体前后加上*符号

*强调字体*

效果如右：强调字体

横杆

在强调字体前后加上~~符号

~~强调字体~~

效果如右：强调字体

加粗斜体

Markdown语法简单，要实现多重效果，只需叠加使用标记符号

***~~强调字体~~***

效果如右：强调字体

分割线

在空行使用***符号即可

***

效果如下：

---

一级标题

在标题前使用# 符号(注意#后面有空格符！！！)

# 一级标题

效果如下：

一级标题

二级标题

在标题前使用# 符号(注意#后面有空格符！！！)

## 二级标题

效果如下：

二级标题

以此类推，几级标题前面就有几个#符，共有六级标题

五、列表和勾选框

Markdown有无序和有序两种列表

无序列表

在表头使用* 符号(注意*后面有空格符！！！)

* 无序列表

• 无序列表

有序列表

在表头使用起始数字.

1.有序列表

1.有序列表

嵌套列表

无论是无序还是有序列表都可以进行嵌套

1. 一级列表
	1. 二级列表
		1. 三级列表
2. 一级列表
3. 一级列表

1. 一级列表
   1. 二级列表
      1. 三级列表
2. 一级列表
3. 一级列表

勾选框

在表头使用* [ ] (注意[和]前后均有空格符）

* [ ] 勾选框

• 勾选框

可以用* [ x] 表示已勾选的勾选框(x无论大小写)

 * [x]  勾选框

• 勾选框

六、代码块

将单个代码用`符包裹

`单个代码`

效果如右：单个代码

用```+代码语言包裹标记代码块

```Markdown

以上显示即为代码块效果

七、引用文本

用>包裹引用文本即可

>引用文本

效用如下：

引用文本

由此可见，引用文本可以嵌套使用

八、超链接和脚注

用[显示文本](链接)显示超链接(注意()均为英文符号！！！)

[CSDN首页](https://www.csdn.net/?spm=1018.2226.3001.4476)

效果如右：CSDN首页

在Typora中，有多个链接时，可以用为链接命名的方式提高链接复用性和文章可读性

请前往[CSDN首页][a]或[CSDN博客页][b]或[CSDN下载页][c]
[a]: https://www.csdn.net/?spm=1018.2226.3001.4476
[b]: https://blog.csdn.net/?spm=1018.2226.3001.4477
[c]: https://download.csdn.net/?spm=1018.2226.3001.6907

效果如下：请前往CSDN首页或CSDN博客页或CSDN下载页

脚注

在强调字体后加[^变量名]

强调字体[^1]
[1]: 强调字体

效果如下：

九、图片插入

用![图片名](图片路径)插入图片

![CSDN](https://img-home.csdnimg.cn/images/20201124032511.png)

效果如下:

同理，我们也可以为图片路径命名提高文章可读性和图片复用性

![CSDN][pic]
[pic]: (https://img-home.csdnimg.cn/images/20201124032511.png)

效果同上

在实际使用Typora中，可以通过配置图床将本地图片同步到线上

十、表格

姓名	年龄	性别
小红	17	女
小明	18	男

以上述表格为例，在Markdown表示如下

| 姓名 | 年龄 | 性别|
| ---- | ---- |----|
| 小红 | 17   | 女 |
| 小明 | 18   | 男 |

由此我们可知，Markdown表格表示如下

| 表头| 表头 |
| ---- | ---- |
| 内容 | 内容 |

----------扩展部分----------

十一、支持自定义HTML内容

Markdown支持html语言，也就是说我们编写md文档时，我们可以直接用html语言代替一些操作

例如：用<hr>标签代替***的分割线作用

<hr/>

效果如下：

---

用<h1>标签代替一级标题

<h1>一级标题</h1>

效果如下：

一级标题

此外，我们还可以实现css属性

<span style="color: red;font-size: 20px">嵌套自定义html内容</span>

效果如下：

十二、其他扩展语法

在实现本节扩展语法前要在Typora中打开扩展语法功能

高亮

用==包裹强调字体

==强调字体==

效果如右：强调字体

上标

用^上标^表示上标

强调字体^上标^

效果如右：强调字体^上标

下标

用~下标~表示上标

强调字体~下标~

效果如右：强调字体_下标

十三、数学公式的使用

Markdown中，数学公式的编写通常依赖于LaTeX语法

单行数学公式

单行数学公式用$包裹

$x = 1 + y$

效果如右：$x=1+y$

多行数学公式

单行数学公式用$$包裹

$$
\sin x^2 + \cos x^2 = 1
$$

效果如下：
$$\sin x^2+\cos x^2=1$$

在数学公式中，直接用^表示上标,_表示下标，两个符号可以同时存在

分号

用\frac{分子}{分母}表示分数

$$
\frac{1}{2}
$$

效果如下：
$$\frac{1}{2}$$

根号

用\sqrt[根指数]{开方数}表示开根

$$
\sqrt[3]{4}
$$

效果如下：
$$\sqrt[3]{4}$$

其他数学符号

\not= 不等于\\
\approx 约等于\\
\leq 小于等于 \\
\geq 大于等于 \\
\times 乘 \\
\div 除 \\
\pm 正负号 \\
\sum 求和 \\
\prod 累乘 \\
\coprod 累除 \\
\overline{1 + 2 + 3 + 4} 平均数\\
90^\circ \\
\sin \\
\cos \\
\tan \\
\cot \\
\pi \\
\infty \\
\int \\
\iint \\
\iiint \\
y\prime \\
\lim \\
\emptyset \\
\in \\
\notin \\
\supset \\
\bigcap \\
\bigcup \\
\log \\
\alpha \\
\beta \\
\gamma \\
\delta \\
\eta \\
\omega \\
\theta \\
\sigma \\
\mu \\
\epsilon \\

效果如下：
$$\begin{gathered} \ne 不等于 \\ \approx 约等于 \\ \le 小于等于 \\ \ge 大于等于 \\ \times 乘 \\ ÷除 \\ \pm 正负号 \\ \sum 求和 \\ \prod 累乘 \\ \coprod 累除 \\ \overline{1+2+3+4}平均数 \\ \cdots 省略号 \\ \cdot \\ 90^{\circ } \\ \sin \\ \cos \\ \tan \\ \cot \\ \pi \\ \infty \\ \int \\ \iint \\ \iiint \\ y\prime \\ \lim \\ \varnothing \\ \in \\ \notin \\ \supset \\ \bigcap \\ \bigcup \\ \log \\ \alpha \\ \beta \\ \gamma \\ \delta \\ \eta \\ \omega \\ \theta \\ \sigma \\ \mu \\ ϵ \end{gathered}$$

值得注意的是，在数学公式中\{表示{转义，\\表示换行符

十四、支持emoji

Markdown还支持emoji，可以通过详细列表查看

:smile:

效果如右：😄

十五、流程图

Markdown还可以通过flow语言实现流程图

st=>start: 开始  
e=>end: 结束  
op1=>operation: 操作1  
op2=>operation: 操作2  
cond=>condition: 条件判断?  
  
st->op1->cond  
cond(yes)->op2  
cond(no)->e  
op2->e

效果如下：