【小白干货】常用Markdown语法总结

概述

Markdown是一种轻量级的「标记语言」

Markown可以使用很多编译器编写，普通文本编译器也可以使用，通过简单的标记语法，它可以时普通文本内容具有一个的格式，不再需要你为了进行排版而花费时间与精力。Markdown文件的后缀名是“md”,它可以允许人们使用易读易写的纯文本格式进行编写，在转化成带有格式的Html页面，是很多博主用来写博文的一种语言。

Markdown的特点：
1、方便，节省时间
2、语法简洁，可专注内容，而不用花费太多时间精力进行格式排版
3、易阅读，在很多编译器中都存在预览功能，可以边写边看到写好的内容格式
4、易编译，很多文本编译器都可以进行Markdown的文件
5、导出方便，支持很多HTML、PDF等格式
存在的一些缺点：
1、需要记一些语法使用（当然，Markdown语法是很简单,上手容易）
2、有些平台或者编译器不支持Markdown编辑模式，可以安装一些插件来添加

语法介绍

基础内容

1、标题

# h1
## h2
### h3
#### h4
##### h5
###### h6

效果

2、段落以及引用

段落

段落的换行可以使用两个以上的空格加上回车，或者在段落后面使用一个空行来表示重新开始一个段落

引用

> 单行引用

对于这一行的文字，可以被高亮显示
效果：

单行引用

注：<br/><br/><br/>可以用于换空行

多行引用，实现嵌套

>第一行
>第二行 
>>缩进一
>>>缩进二

效果

第一行
第二行

缩进一

缩进二

3、字体样式

序号	语法	效果
1	~~删除线~~	删除线
2	*斜体*或_斜体_	斜体
3	**粗体**或__粗体__	粗体
4	***斜粗体***或___斜粗体___	粗体
5	上标:X<sup>2</sup>	X2
6	下标:X<sub>2</sub>	X2

4、显示特殊字符

4.1、更改颜色或字体

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>

效果：
我是黑体字

我是微软雅黑

我是华文彩云

红色

绿色

蓝色
是尺寸
黑体，蓝色，尺寸为5

注：还有一种改变字体颜色
字体颜色$\color{red}{红色}$
但是我使用时，没有出现颜色变化,可能是由于编辑器的原因

4.2、更改背景色

为字体添加背景
<table><tr><td bgcolor=skyblue>背景色skyblue</td></tr></table>
效果:

背景色skyblue

附：颜色查询对照表

5、列表

只需要在文本前加上+或*或-就可以转换成列表

+ 文本
* 文本
- 文本

效果:

• 文本

• 文本

• 文本

注:在符号和文本之间需要加一个空格
在文本前加上1. 2. 3.这样的数字，可以生成有序列表

1. 文本
2. 文本
3. 文本

注:在数字和文本之间需要加一个空格
效果：

1. 文本
2. 文本
3. 文本

6、链接和图片

普通链接
[普通链接]（http: ）
直接连接：
<http: >

注：括号需要用英文标号（半角英文）

图片描述
![](图片路径)
注：![]() 用英文标号

在Markdown中图片插入的其他方法：CSDN

7、表格

Markdown 制作表格使用| 来分隔不同的单元格，使用- 来分隔表头和其他行

语法格式：
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

效果：

表头	表头
单元格	单元格
单元格	单元格

表格的对齐方式：

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

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

• :-: 设置内容和标题栏居中对齐
  如：

|  左对齐 | 居中对齐 |右对齐|
|:---     | :----:  | ---:
| 单元格  | 单元格   |单元格
| 单元格  | 单元格   |单元格

左对齐(对齐方式)	居中对齐(对齐方式)	右对齐(对齐方式)
单元格	单元格	单元格
单元格	单元格	单元格

8、代码

行内代码用：

`文本`

效果：
文本

注:（ ` ）符号在键盘1的左边，英文标号下使用
代码区块：

用「tab」键或者四个空格表示行代码区块

也可以用``````包裹一段代码，在```后指定一种语言（可以不指定）

例如：

```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
 ```

效果：

$(document).ready(function () {
    alert('RUNOOB');
});

9、分页线和换行

分页符

使用三个以上的---可以描述一根分页线
注：前后要有空格
使用方式: ---

换行

方法1：行末加上三个以上的空格，在回车   
方法2：每行之间留出一行或者多行空行(在行末加上两个或者多个回车即可)

进阶内容

注：对于进阶内容，在一些代码编辑器中，可能无法看到相应的效果，需要安装一些编辑器插件，请注意自己的代码编辑器是否需要安装插件

1、制作待办事项To-do List

语法：横框+ 空格+方括号（方括号中必须有空格或者x） + 空格+ 文本

- [x] already subject1
    - [x] already subject1.1
    - [x] already subject1.2
- [ ] already subject2

效果：

• already subject1
  • already subject1.1
  • already subject1.2
• already subject2

2、高效绘制：流程图、甘特图等

注：在使用Markdown语法绘制流程图等，需要注意有些代码编辑器如果在实时预览时，不能看到对应的流程图，可能是需要安装一些插件
如：VS code需要安装安装Markdown Preview Enhanced插件
vscode还需下载插件Markdown Preview Mermaid Support(支持markdown流程图、甘特图)
在VS code中，通过Markdown Preview Enhanced插件使用Mermaid预览渲染的流程图和时序图时，会出现：一些字体无法正确解析、渲染出来的图像变成了黑色的图像块等问题。
问题解决方法：
可以在左下角点击后，选择【设置】，在设置中搜索“markdown mermaid theme”，找到后将主题修改成其他可以看清楚的主题
插件Markdown Preview Enhanced的配置

流程图方向

以下几种符号与graph进行搭配，如graph TD

• TB 从上到下
• BT 从下到上
• RL 从右到左
• LR 从左到右
  注：TD 同TB

基本图形

• id + [文字描述]矩形
• id + (文字描述)圆角矩形
• id + >文字描述]不对称的矩形
• id + {文字描述}菱形
• id + ((文字描述))圆形

节点之间的连接

• A --> B A带箭头指向B
• A — B A不带箭头指向B
• A -.- B A用虚线指向B
• A -.-> B A用带箭头的虚线指向B
• A ==> B A用加粗的箭头指向B
• A – 描述 — B A不带箭头指向B并在中间加上文字描述
• A – 描述 --> B A带箭头指向B并在中间加上文字描述
• A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
• A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

实例1

```mermaid 
graph TD
    A[subject1] --> B(first)
    B --> C{branch}
    C --> |one| D[one1]
    C --> |Two| E[two1]
    C --> |Three| F[three1]
```

流程图效果

案例2

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

流程图效果

甘特图用法

mermaid：图中红框第一行内容与最后一行内容，表示当前使用的语言为mermaid
gantt：表示图表类型为甘特图
dateFormat：指定日期格式（Y表示年，M表示月，D表示日）。YYYY-MM-DD（2019-03-14），YY-MM-DD(19-03-14)
section： 项目关键字，空格之后输入项目名称。
任务行： section后每一行为一个任务。第一个字符串为任务名称，之后以:开头，添加任务属性。
接下来用下面代码实例说明常见任务属性。
任务状态：
done 已完成
active正在进行
crit 关键任务
默认任务都为待完成状态
任务描述：在des1、des2位置添加任务描述，其它任务引用时直接引用des1就可以。
after: 描述任务时间关系。des3, after des2表示des3紧跟在des2之后。
任务时长有三种方式：
时间范围 如：2014-01-06,2014-01-08
指定天数 如：5d
指定开始日期+天数 如：2014-01-06，5d
注:所有关键字之间用“,”分隔，关键字需要属性时用空格分隔(如：after des2,)

```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title 计划表
        section 现有任务
        已完成               :done,    des1, 2016-01-06, 2d
        进行中               :active,  des2, 2016-01-09, 3d
        计划中               :         des3, after des2, 5d
```

效果

3、数据公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

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

效果如下：
$${\mathbf{V}}_1\times {\mathbf{V}}_2=\left|\begin{array}{ccc}\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{array}\right|$$

数学公式内容可参考:
数学公式语法
数学公式1
数学公式2

以上是对于使用Markdown的常用语法总结，希望对于你学习Markdown有一定帮助。
参考链接
1、教程-markdown
2、插件Markdown Preview Enhanced的配置
3、数学公式语法
4、数学公式1
5、数学公式2
6、甘特图