Markdown 语法详细介绍

前言

Markdown是一种轻量级的标记语言，可以与HTML互相转换。可用于网页展示，便于排版。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

1. 功能快捷键

功能	快捷键
撤销	Ctrl + Z
重做	Ctrl + Y
加粗	Ctrl + B
斜体	Ctrl + I
标题	Ctrl + Shift + H
无序列表	Ctrl + Shift + U
有序列表	Ctrl + Shift + O
检查列表	Ctrl + Shift + C
插入代码	Ctrl + Shift + K
插入链接	Ctrl + Shift + L
插入图片	Ctrl + Shift + G

2. 基本语法

2.1 文本样式

输入内容	显示效果
*强调文本* _强调文本_	强调文本 强调文本
**加粗文本** __加粗文本__	加粗文本 加粗文本
==标记文本==	标记文本
~~删除文本~~	删除文本

引用
输入内容：
> 引用文本

>> ___引用嵌套___

显示效果：

引用文本

引用嵌套

注

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等。

下角标和上角标
输入内容：
H~2~O is是液体。
2^10^ 运算结果是 1024.

显示效果：
H₂O is是液体。
2¹⁰ 运算结果是 1024.

2.2 创建分级标题，有助于目录的生成

写法一：

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

# 一级标题
## 二级标题

写法二：

一级标题
============

或者

二级标题
--------------------------

2.3 链接

2.3.1 行内式链接

（1）行内形式是直接在后面用括号直接写上链接

输入内容：
This is an [example link](http://example.com/).

显示效果：
This is an example link.

（2）你也可以选择性的加上 title (链接的 title 文字) 属性：

输入内容：
This is an [example link](http://example.com/ “样例”).

显示效果：
This is an example link.

（3）自动链接
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来， Markdown 就会自动把它转成链接。也可以直接写，不用<>包起来
输入内容：
http://google.com/ 或者 或者

显示效果：
http://google.com/
[email protected]

2.3.2 参考式链接

参考形式的链接让你可以为链接定一个名称，之后你可以在文件的其他地方定义该链接的内容：

输入内容：
I get 10 times more traffic from [Google][gg] than from
[Yahoo][yh] or [MSN][].

[gg]: http://google.com/ “Google”
[yh]: http://search.yahoo.com/ “Yahoo Search”
[MSN]: http://search.msn.com/ “MSN Search”

显示效果：
I get 10 times more traffic from Google than from
Yahoo or MSN.

2.3.3 内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构

2.3.4 锚点

锚点其实就是页内超链接，用于文章快速定位，点击目录便可直接跳转到指定位置。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。

使用示范：


首先是建立一个跳转的连接。(如上图)
跳转 或 回到目录
然后标记要跳转到什么位置即可。文字颜色可随意设置：（如上图）

跳转到这里：

跳转 或 回到目录

2.3.5 注脚

语法说明：
在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。

示例如下：
输入内容：
一个具有注脚的文本。[^1]
甘特图的mermaid语法[^2]


[^1]: 注脚的解释
[^2]: [mermaid语法说明](https://mermaidjs.github.io/)

显示效果：
一个具有注脚的文本。¹
甘特图的mermaid语法²

1、脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。
2、若编辑器不支持锚点，则可以用注脚实现页面内部的跳转。

2.4 图片

图片的语法和链接很像。

行内形式（title 是选择性的）:

语法说明：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lP29cB95-1582696235869)(path "Title")]
![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg)
图片:

![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg =30x30)
带尺寸的图片:

![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center)
居中的图片:

![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)
居中并且带尺寸的图片:

参考形式：

语法说明：
![alt][id]

[id]: path “Title”

2.5 分割线

你可以在一行中用三个以上的星号(*)、减号(-)、底线(_)来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。
输入内容：

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

显示效果：

---

---

---

---

---

2.6 代码块

对于程序员来说这个功能是必不可少的，插入程序代码的方式有两种，一种是利用缩进(tab), 另一种是利用反引号`（一般在ESC键下方，和~同一个键）包裹代码。

（1）代码块：缩进 4 个空格或是 1 个制表符。效果如下：

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World");
    }
}

（2）行内式：如果在一个行内需要引用代码，只要用反引号`引起来就好（一般在ESC键下方，和~同一个键）

示例：
输入内容：
I strongly recommend against using any `` tags.

显示效果：
I strongly recommend against using any tags.

（3）多行代码块与语法高亮：在需要高亮的代码块的前一行及后一行使用三个单反引号`包裹，就可以了。

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

示例：
输入内容：

```java
public class HelloWorld {
public static void main(String[] args) {
System.out.println(“Hello, World”);
}
}
```

```javascript
// An highlighted block
var foo = ‘bar’;
```

显示效果：

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World");
    }
}

// An highlighted block
var foo = 'bar';

（4）代码块里面包含html代码
在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，剩下的 Markdown 都会帮你处理。

示例如下：
输入内容：

  
    
  
    
  
    

科目	说明
java	面向对象的语言
c语言	面向过程的语言

显示效果：

科目	说明
java	面向对象的语言
c语言	面向过程的语言

2.7.1 列表

（1）无序列表
使用 *，+，- 表示无序列表。
注意：符号后面一定要有一个空格，起到缩进的作用。

输入内容:
* Red
* Red
+ Green
+ Green
- Blue
- Blue

显示效果：

• Red
• Red

• Green
• Green

• Blue
• Blue

（2）有序列表
使用数字和一个英文句点表示有序列表。
注意：英文句点后面一定要有一个空格，起到缩进的作用

输入内容
1. Red
2. Green
3. Blue

显示效果：

1. Red
2. Green
3. Blue

（3）制作一份待办事项 —— Todo 列表
输入内容
- [ ] 计划任务
- [x] 完成任务

显示效果：

• 计划任务
• 完成任务

（4）列表和其它要素混合使用
列表不光可以单独使用，也可以使用其他的 Markdown 语法，包括标题、引用、代码区块等。

例如：

• 项目
  • 项目
    • 项目

注意事项：

（1）加粗效果不能直接用于列表标题里面，但是可以嵌套在列表里面混合使用
（2）列表中包含代码块（前面加2个tab或者8个空格，并且需要空一行，否则不显示）

2.7.2 自定义列表

输入内容：

Markdown
: Text-to-HTML conversion tool

Authors
: John
: Luke

显示效果：

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

注

Markdown 和 Authors 前边必须空一行

2.8 注释也是必不可少的

输入内容：

Markdown 将文本转换为 HTML。

*[HTML]: 超文本标记语言
*[Markdown]: Markdown是一种轻量级标记语言

显示效果：
Markdown 将文本转换为 HTML。

2.9 表格

表格对齐方式：我们可以指定表格单元格的对齐方式，冒号在左边表示左对齐，右边表示有对齐，两边都有表示居中。

如下图所示：

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

3 常用技巧

3.1 换行

方法2：使用html语言换行标签：

3.2 缩进字符

缩进语法	效果
或	缩进1/4中文
或	缩进1/4中文，1字符
或	缩进1/2中文，2字符

注：分号必须写上

3.3 特殊符号

（1）Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

（2）其他特殊字符

输入内容	显示效果
❤	❤
✓	✓
☀	☀
★	★
☎	☎
(c)	©
(r)	®
(p)	§

想知道字符对应的Unicode码，可以看这个网站：https://unicode-table.com/cn/

3.4 字体、字号与颜色

Markdown是一种轻量级标记语言，它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。但是它本身是不支持修改字体、字号与颜色等功能的！

CSDN-markdown编辑器是其衍生版本，扩展了Markdown的功能（如表格、脚注、内嵌HTML等）。因此可以使用 HTML 来修改字体、字号与颜色。

字体，字号和颜色编辑如下代码

输入内容	显示效果
微软雅黑	微软雅黑
楷体	楷体

3.6 背景色

同样，Markdown本身不支持背景色设置，需要采用内置 HTML 的方式实现：借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。举例如下：

输入内容	显示效果
背景色是：orange	背景色是：orange

3.7 emoji表情符号

emoji表情使用 :EMOJICODE: 的格式，详细列表可见
https://www.webpagefx.com/tools/emoji-cheat-sheet/

当然现在很多markdown工具或者网站都不支持。

示例：

输入内容	显示效果
:smile:
:smiling_imp:

4 高端用法

4.1 KaTeX数学公式

您可以使用渲染 LaTeX 数学表达式 KaTeX:

1.行内公式：使用两个 $ 符号引用公式:
2.行间公式：使用两对 $$ 符号引用公式：

示例：
输入内容：

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

显示效果：
Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式 here.

4.2 新的甘特图功能，丰富你的文章

输入内容：

```mermaid
gantt
    dateFormat YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid

    section 现有任务
    已完成 :done, des1, 2014-01-06, 2014-01-08
    进行中 :active, des2, 2014-01-09, 3d
    计划一 :des3, after des2, 5d
    计划二 :des4, after des3, 5d

    section Another
    Task in sec  :after des4 , 12d
    another task :24d
```

显示效果：

Mon 06 Mon 13 Mon 20 Mon 27 Mon 03 Mon 10 Mon 17 Mon 24 已完成 进行中 计划一 计划二 Task in sec another task 现有任务 Another Adding GANTT diagram functionality to mermaid

• 关于 甘特图 语法，参考 here.

4.3 UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

输入内容：

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

李四-->>张三: 打量着王五…
张三->>王五: 很好… 王五, 你怎么样?
```

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```

显示效果：

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

还将产生一个流程图。:

链接

长方形

圆

圆角长方形

菱形

• 关于 Mermaid 语法，参考 here

4.4 FLowchart流程图

我们依旧会支持 flowchart 的流程图：

输入内容：

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
```

显示效果：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no

• 关于 Flowchart流程图 语法，参考 here.

5 导出与导入

5.1 导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

5.2 导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎

2. mermaid语法说明 ↩︎