MARKDOWN 语法说明

本页是本博客实际可用的 Markdown 语法手册。站点渲染器为 hexo-renderer-markdown-it，并启用了下标 / 上标、脚注、缩写、任务列表、定义列表、Emoji、扩展表格、按键、数学公式（MathJax3，服务端渲染为 SVG）等插件。每节均给出 Markdown 源码 与 渲染效果 对照。

标题

标题以 # 开头，# 的数量代表层级，共支持六级。建议从一级标题开始，并保持层级连续。

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

标题还支持用「下划线」方式书写（一级用 =，二级用 -）：

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

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

---

段落与换行

• 段落：由一个或多个连续文本行组成，段落之间用空行分隔。
• 换行：行尾添加两个空格后回车，或直接写一个空的 HTML 标签 <br>，即可在同一段落内强制换行。
• 直接回车（不加两个空格）在多数情况下会被合并为一个空格。

第一行（行尾有两个空格）␠␠
第二行

这是另一个段落。<br>它被强制换到了下一行。

渲染效果：

第一行（行尾有两个空格）
第二行

这是另一个段落。
它被强制换到了下一行。

---

文字样式

基础样式

*斜体* 或 _斜体_
**粗体** 或 __粗体__
***粗斜体***
~~删除线~~
==高亮标记==
++插入文本++
H~2~O 下标
2^10^ 上标
`行内代码`
***

*[HTML]: HyperText Markdown Language

渲染效果：

斜体 或 斜体

粗体 或 粗体

粗斜体

删除线

高亮标记

插入文本

H₂O 下标

2¹⁰ 上标

行内代码

其中「高亮 ==、插入 ++、下标 ~、上标 ^」由站点插件提供支持。

分隔线

一行中使用三个或更多的 *、- 或 _（可含空格）即可生成分隔线：

---
***
___
* * *

渲染效果：

---

转义字符

当需要原样显示 Markdown 特殊符号时，在前面加反斜杠 \。可转义的字符包括：

\  `  *  _  {}  []  ()  #  +  -  .  !  |  ~  =

例如 \*不是斜体\* 渲染为 *不是斜体*，\# 渲染为 #。

---

列表

无序列表

使用 *、+ 或 - 开头，缩进 2~4 个空格可实现嵌套：

- 列表项一
- 列表项二
  - 嵌套项 A
  - 嵌套项 B
- 列表项三

渲染效果：

• 列表项一
• 列表项二
  • 嵌套项 A
  • 嵌套项 B
• 列表项三

有序列表

使用「数字 + 点 + 空格」。渲染时序号会自动递增，因此源码里全部写 1. 也没问题：

1. 第一项
2. 第二项
3. 第三项
    1. 嵌套有序项
    2. 嵌套有序项

渲染效果：

1. 第一项
2. 第二项
3. 第三项
   1. 嵌套有序项
   2. 嵌套有序项

任务列表

使用 [ ]（未完成）与 [x]（已完成），由任务列表插件渲染为可勾选样式：

- [x] 已完成的任务
- [ ] 未完成的任务
- [ ] 写一篇 Markdown 教程

渲染效果：

• 已完成的任务
• 未完成的任务
• 写一篇 Markdown 教程

定义列表

由 markdown-it-deflist 提供，术语在下一行用冒号 : 引出定义：

Markdown
: 一种轻量级标记语言

Hexo
: 一个快速、简洁的静态博客框架
: 支持 Markdown 写作与丰富的插件系统

渲染效果：

Markdown

一种轻量级标记语言

Hexo

一个快速、简洁的静态博客框架

支持 Markdown 写作与丰富的插件系统

---

引用

使用 > 表示引用，支持多级嵌套与内部放置其他 Markdown 语法：

> 这是一级引用。
>
> > 这是嵌套的二级引用。
>
> - 引用内也可以放列表
> - 以及 **粗体**、`代码` 等

渲染效果：

这是一级引用。

这是嵌套的二级引用。

• 引用内也可以放列表
• 以及 粗体、代码 等

---

链接

常用写法

行内链接：[Hexo 官网](https://hexo.io/)
带标题链接：[Hexo](https://hexo.io/ "鼠标悬停显示")
自动链接：<https://hexo.io/>
邮箱链接：<love_kurtwang@163.com>
引用式链接：[文档][hexo-docs]

[hexo-docs]: https://hexo.io/docs/ "Hexo 文档"

渲染效果：

行内链接：Hexo 官网

带标题链接：Hexo

自动链接：https://hexo.io/

邮箱链接：love_kurtwang@163.com

引用式链接：文档

---

图片

基础语法

![替代文本](图片地址 "可选标题")

![Hexo Logo](https://hexo.io/icon/apple-touch-icon-180x180.png "Hexo")

渲染效果：

当一张图片独占一个段落（前后均为空行）时，站点会自动把它包进 <figure>，并以图片的替代文本作为题注显示。

图片链接

把图片语法放进链接语法中，即可实现点击图片跳转：

[![alt 文本](https://hexo.io/icon/apple-touch-icon-180x180.png)](https://hexo.io/)

渲染效果：

控制尺寸

标准 Markdown 不支持设置图片宽高，可直接使用 HTML：

<img src="https://hexo.io/icon/apple-touch-icon-180x180.png" width="64">

渲染效果：

图片灯箱

本站已开启 FancyBox 灯箱，正文中的普通图片会被自动接管，点击即弹出大图遮罩，支持关闭与缩放，图片的 alt 或 title 会显示为灯箱标题。无需额外语法，照常插入图片即可：

![Hexo Logo](https://hexo.io/icon/apple-touch-icon-180x180.png)

渲染效果（点击图片即可放大查看）：

已经手动套了超链接的图片不会被灯箱接管；FancyBox 与 medium-zoom 二者只能开启一个，本站使用 FancyBox。

---

代码

行内代码

用一对反引号包裹；代码内若含反引号，可用双反引号 ` 包裹：

执行 `hexo clean && hexo g` 命令。
``代码中含 `反引号` 时用双反引号``

渲染效果：

执行 hexo clean && hexo g 命令。

代码中含 `反引号` 时用双反引号

代码块与语言高亮

用三个反引号包裹，并在开头标注语言，即可获得语法高亮：

```javascript
// JavaScript
const greet = name => `Hello, ${name}!`;
console.log(greet('Hexo'));
```

渲染效果：

// JavaScript
const greet = name => `Hello, ${name}!`;
console.log(greet('Hexo'));

站点同样支持大量语言标注，例如 bash、python、java、go、sql、yaml、json、html、css 等：

# Bash：新建文章并启动本地预览
hexo new "我的第一篇文章"
hexo server

# Python
def fib(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

SELECT id, title, created_at
FROM posts
WHERE published = 1
ORDER BY created_at DESC
LIMIT 10;

代码块中显示反引号

外层使用比内层更多的反引号即可。例如展示「三个反引号的代码块」时，外层用四个反引号：

```bash
hexo g
```

---

表格

基础表格

使用 | 分列，用 - 组成表头与内容的分隔行；冒号 : 控制对齐方式：

• :--- 左对齐（默认）
• :--: 居中
• ---: 右对齐

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

渲染效果：

左对齐	居中对齐	右对齐
单元格	单元格	单元格
Hexo	Next	Markdown

表格中的其他语法

单元格内可使用行内代码、粗体、链接等，竖线需写作 \| 转义：

| 命令 | 说明 |
|------|------|
| `hexo n` | 等同于 `hexo new`，新建文章 |
| `hexo g` | 生成静态文件，详见 [文档](https://hexo.io/docs/generating.html) |

渲染效果：

命令	说明
hexo n	等同于 hexo new，新建文章
hexo g	生成静态文件，详见 文档

---

脚注

使用 [^名称] 标记引用位置，文末用相同名称书写脚注内容，鼠标悬停或点击可查看：

这是一句带有脚注的文字[^1]，也可以使用命名脚注[^hexo]。

[^1]: 这是一条数字脚注的详细说明。
[^hexo]: Hexo 是基于 Node.js 的快速、简洁且高效的博客框架。

渲染效果：

这是一句带有脚注的文字^[1]，也可以使用命名脚注^[2]。

---

缩写

首次定义缩写后，正文中出现的对应词汇会自动带上提示（<abbr> 标签）。定义本身不会显示在页面中：

本博客使用 HTML 与 CSS 构建页面。

*[HTML]: HyperText Markup Language（超文本标记语言）
*[CSS]: Cascading Style Sheets（层叠样式表）

渲染效果（鼠标悬停在缩写词上可看到全称）：

本博客使用 HTML 与 CSS 构建页面。

---

Emoji 表情

使用「冒号 + 短代码 + 冒号」书写，由 Emoji 插件渲染：

:smile: :heart: :thumbsup: :rocket: :tada: :coffee: :book:

渲染效果：

😄 ❤️ 👍 🚀 🎉 ☕ 📖

更多短代码可参考 emojicodes。

---

键盘按键

由 markdown-it-kbd 提供，使用双层方括号 [[ ]] 表示键盘按键，组合键用 + 连接：

按 [[Ctrl+C]] 复制，[[Ctrl+V]] 粘贴；
保存文件请按 [[Ctrl+S]]，强制退出按 [[Ctrl+Alt+Del]]。

渲染效果：

按 Ctrl+C 复制，Ctrl+V 粘贴；保存文件请按 Ctrl+S，强制退出按 Ctrl+Alt+Del。

---

数学公式

站点使用 markdown-it-mathjax3，在构建时把公式服务端渲染为内联 SVG，无需前端加载 MathJax。

行内公式

用一对 $ 包裹（$ 需紧贴公式，两侧无空格）：

质能方程写作 $E = mc^2$，求和公式 $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$。

渲染效果：

质能方程写作 $E=m{c}^2$ ，求和公式 $\sum _{i=1}^{n}i=\frac{n(n+1)}{2}$ 。

块级公式

用一对 $$ 包裹并独占段落，公式会居中独占一行并自动编号：

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

渲染效果：

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

矩阵示例：

$$\left[\begin{array}{cc}a& b\\ c& d\end{array}\right]\left[\begin{array}{c}x\\ y\end{array}\right]=\left[\begin{array}{c}ax+by\\ cx+dy\end{array}\right]$$

---

Mermaid 图表

Mermaid 用纯文本绘制流程图、时序图、甘特图等，本站已在主题配置中开启（mermaid.enable: true）。写作时用 Next 主题提供的 mermaid 块标签把图表代码包起来（起始标记为 mermaid、结束标记为 endmermaid），前端即渲染为矢量图表，并随站点的明 / 暗模式自动切换主题。

写法很简单：用 mermaid 块标签包住图表代码即可，标签体不会被当作普通代码块高亮。注意：Next 主题不会自动转换语言为 mermaid 的三反引号围栏，必须使用下方源码所示的标签写法，否则只会显示为高亮代码。

流程图

{% mermaid %}
graph LR
    A[开始] --> B{判断条件}
    B -->|满足| C[执行处理]
    B -->|不满足| D[结束]
    C --> D
{% endmermaid %}

渲染效果：

graph LR
    A[开始] --> B{判断条件}
    B -->|满足| C[执行处理]
    B -->|不满足| D[结束]
    C --> D

时序图

{% mermaid %}
sequenceDiagram
    participant 浏览器
    participant 服务器
    浏览器->>服务器: 发起请求
    服务器-->>浏览器: 返回响应
{% endmermaid %}

渲染效果：

sequenceDiagram
    participant 浏览器
    participant 服务器
    浏览器->>服务器: 发起请求
    服务器-->>浏览器: 返回响应

Mermaid 属于前端渲染：图表代码先以一个带 mermaid 类名的 code 元素写入页面，再由浏览器加载的 Mermaid 库绘制，与上一节「构建期生成 SVG」的数学公式不同。更多图形（甘特图、类图、状态图、饼图等）与语法见 Mermaid 官方文档。

---

HTML 内联

Markdown 兼容原生 HTML，标准语法难以表达的效果可直接写 HTML：

<kbd>Ctrl</kbd> + <kbd>S</kbd> &nbsp;保存

<details>
<summary>点击展开 / 收起</summary>

折叠区域内同样支持 **Markdown** 与 `代码`。

</details>

渲染效果：

Ctrl + S  保存

点击展开 / 收起

折叠区域内同样支持 Markdown 与 代码。

---

Next 主题标签插件

除标准 Markdown 外，Next 主题还提供一组 {% 标签 %}。下面列举常用的几个。

Note 提示块

支持 default / primary / info / success / warning / danger 六种样式，加 no-icon 可隐藏图标：

{% note info %}
这是一条 **info** 提示，内部支持 Markdown。
{% endnote %}

{% note warning no-icon %}
这是一条不带图标的 warning 提示。
{% endnote %}

渲染效果：

这是一条 info 提示，内部支持 Markdown。

这是一条不带图标的 warning 提示。

居中引用

用于居中显示一段文字或名言：

{% centerquote %}
生活不止眼前的苟克，还有诗和远方。
{% endcenterquote %}

渲染效果：

生活不止眼前的苟且，还有诗和远方。

Label 与 Button 标签

{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label warning@警告 %} {% label danger@危险 %}

{% btn https://hexo.io/, Hexo 官网, home fa-fw fa-lg %}

渲染效果：

默认 主要 成功 警告 危险 Hexo 官网

---

速查表

效果	语法	说明
标题	## 标题	# 数量决定层级
粗体	**文字**	也可用 __文字__
斜体	*文字*	也可用 _文字_
删除线	~~文字~~	—
高亮	==文字==	插件支持
插入	++文字++	插件支持
下标 / 上标	H~2~O / 2^10^	插件支持
行内代码	`代码`	—
代码块	```js	标注语言可高亮
链接	[文字](URL)	—
图片		—
引用	> 引用	可嵌套
无序列表	- 项目	* + 亦可
有序列表	1. 项目	序号自动递增
任务列表	- [x] 项目	插件支持
定义列表	术语 + 换行 : 定义	插件支持
分隔线	---	*** 亦可
脚注	[^1] + 文末 [^1]: 说明	插件支持
缩写	*[HTML]: 全称	插件支持
Emoji	:smile:	插件支持
按键	[[Ctrl+C]]	插件支持
行内公式	$E=mc^2$	MathJax3
块级公式	$$ ... $$	MathJax3
Mermaid 图表	mermaid / endmermaid 块标签包裹图表代码	流程图 / 时序图等，需主题开启
图片灯箱	普通 ![]() 即可	FancyBox 自动接管，点击放大
转义	\*	特殊符号前加 \

---

1. 这是一条数字脚注的详细说明。 ↩︎

2. Hexo 是基于 Node.js 的快速、简洁且高效的博客框架。 ↩︎