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/> 或者 <address@example.com>

显示效果：
http://google.com/
address@example.com

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 `<blink>` tags.

显示效果：
I strongly recommend against using any <blink> 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 都会帮你处理。

示例如下：
输入内容：

<table border=“1px” cellpadding=“10px” cellspacing=“0px”>
  <tr height=“50px”>
    <th width=“100px”>科目
    <th width=“100px”>说明
  </tr>
  <tr height=“50px”>
    <td>java
    <td>面向对象的语言
  </tr>
  <tr height=“50px”>
    <td>c语言
    <td>面向过程的语言
  </tr>
</table>

显示效果：

科目	说明
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语言换行标签：<br/>

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 来修改字体、字号与颜色。

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

输入内容	显示效果
<font face=“微软雅黑” color=“red” size=3>微软雅黑</font>	微软雅黑
<font face=“楷体” color=#9932cc size=5>楷体</font>	楷体

3.6 背景色

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

输入内容	显示效果
<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>	背景色是：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
```

显示效果：

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

4.3 UML 图表

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

输入内容：

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

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

```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
```

显示效果：

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

5 导出与导入

5.1 导出

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

5.2 导入

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

---

1. 注脚的解释 ↩︎

2. mermaid语法说明 ↩︎