Markdown / VitePress 语法速查
本页是编辑本文档站时的速查表——所有常用语法都以可复制的源码形式列出， 方便你看着这页改这页。渲染效果见 Markdown 扩展演示。
frontmatter（页面顶部 YAML）
yaml
---
title: 页面标题 # 必填，显示在浏览器标签与大标题
description: SEO 描述 # 选填，meta description
editLink: true # 选填，是否显示"编辑此页"
layout: doc # 选填：doc（默认）/ home / page
aside: left # 选填：left（默认）/ right / false
outline: [2, 3] # 选填，本页大纲层级
lastUpdated: true # 选填，覆盖全局是否显示最后更新时间
sidebar: false # 选填，是否在本页隐藏侧边栏
---1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
标题与目录
markdown
# 一级标题（页面 H1，自动入面包卡片）
## 二级标题（进侧边栏大纲）
### 三级标题（进侧边栏大纲）
#### 四级标题
<!-- 自动生成目录（在文档中插入 toc） -->
[[toc]]1
2
3
4
5
6
7
2
3
4
5
6
7
强调与链接
markdown
**粗体** *斜体* ~~删除线~~ `行内代码`
[链接文字](https://example.com)
[带标题的链接](https://example.com "鼠标悬停标题")
[内部文档链接](/guide/getting-started) <!-- 相对路径，cleanUrls -->
[带锚点的链接](/features/browser#功能特性)
<https://example.com> <!-- 自动链接 -->1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
图片
markdown
 <!-- public/ 下的绝对路径 -->
 <!-- 带标题 -->
 <!-- 相对路径 -->1
2
3
2
3
图片资源位置
所有静态资源放在 docs/public/，文档里用 /xxx.png 引用即可（无需写 public/）。
列表
markdown
- 无序列表项
- 第二项
- 嵌套子项
- 另一个子项
- 第三项
1. 有序列表第一项
2. 有序列表第二项
3. 第三项
- [x] 已完成任务
- [ ] 未完成任务1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
表格
markdown
| 列 1 | 列 2 | 列 3 |
|------|:-----|-----:|
| 左对齐 | 居中 | 右对齐 |
| 数据 | 数据 | 数据 |1
2
3
4
2
3
4
引用与嵌套
markdown
> 这是引用块
> 第二行
>
> > 嵌套引用
> > 第二行
> [!NOTE]
> GitHub-flavored 提醒框（NOTE / TIP / IMPORTANT / CAUTION / WARNING）1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
代码块
markdown
\`\`\`ts
// 三反引号 + 语言标识
const x = 1
\`\`\`
\`\`\`ts{1,3-5} <!-- 高亮第 1、3-5 行 -->
\`\`\`ts{1,3-5} <!-- 行号高亮 -->
\`\`\`py
print('hello')
\`\`\`1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
代码块内的特殊语法
markdown
\`\`\`ts
const a = 1 // [!code highlight] <!-- 行高亮 -->
const b = 2 // [!code error] <!-- 错误背景 -->
const c = 3 // [!code warning] <!-- 警告背景 -->
const d = 4 // [!code focus] <!-- 聚焦（其他行变暗） -->
\`\`\`1
2
3
4
5
6
2
3
4
5
6
diff 代码块
markdown
\`\`\`ts diff
- 删除的行
+ 新增的行
未变化的行
\`\`\`1
2
3
4
5
2
3
4
5
代码组（多语言切换）
markdown
::: code-group
\`\`\`bash [pnpm]
pnpm install
\`\`\`
\`\`\`bash [npm]
npm install
\`\`\`
:::1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
自定义容器
markdown
::: tip
提示内容（绿色边框）
:::
::: info
信息内容（蓝色边框）
:::
::: warning
警告内容（黄色边框）
:::
::: danger
危险内容（红色边框）
:::
::: details 点击展开
折叠内容（点击标题展开）
:::
<!-- 带自定义标题 -->
::: tip 自定义标题
内容
:::
<!-- 嵌套容器 -->
::: tip 外层
::: warning 内层
嵌套内容
:::
:::1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Badge 徽章
markdown
# 标题 <Badge type="tip" text="稳定" />
# 标题 <Badge type="info" text="默认" />
# 标题 <Badge type="warning" text="dev 分支" />
# 标题 <Badge type="danger" text="废弃" />
<!-- 自定义颜色 -->
<Badge type="tip" text="v0.1.0" />1
2
3
4
5
6
7
2
3
4
5
6
7
Mermaid 图表
markdown
\`\`\`mermaid
flowchart LR
A[开始] --> B{判断}
B -->|是| C[处理]
B -->|否| D[结束]
C --> D
\`\`\`
\`\`\`mermaid
sequenceDiagram
participant C as 客户端
participant S as 服务器
C->>S: 请求
S->>C: 响应
\`\`\`1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
脚注
markdown
正文用方括号引用[^1]，多脚注[^2]。
[^1]: 脚注内容会自动渲染在页面底部。
[^2]: 第二个脚注。1
2
3
4
2
3
4
Emoji
markdown
:tada: :rocket: :lock: :white_check_mark: :warning: :100:
<!-- 完整列表见 https://github.com/github/gemoji -->1
2
3
2
3
数学公式（KaTeX/MathJax）
markdown
行内公式 $E = mc^2$
块级公式
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$1
2
3
4
5
6
2
3
4
5
6
HTML 内联
markdown
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<sub>下标</sub> H<sub>2</sub>O
<sup>上标</sup> x<sup>2</sup>
<mark>标记</mark>
<u>下划线</u>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
链接到代码块
markdown
<!-- 在代码块后加 #id，文档其他位置可链接 -->
\`\`\`ts
function foo() {} // [#anchor-id]
\`\`\`
<!-- 引用 -->
见 [锚点函数](#anchor-id)1
2
3
4
5
6
7
2
3
4
5
6
7
在 Markdown 中用 Vue 组件
markdown
<!-- VitePress 默认主题内置 Badge，直接用 -->
<Badge type="tip" text="内置" />
<!-- 自定义 Vue 组件（需在 .vitepress/theme/index.ts 全局注册） -->
<MyComponent prop="value" />1
2
3
4
5
2
3
4
5
frontmatter home 布局（首页）
yaml
---
layout: home
hero:
name: 项目名
text: 副标题
tagline: 一句话描述
image:
src: /logo.svg
alt: Logo
actions:
- theme: brand
text: 主按钮
link: /guide/
- theme: alt
text: 次按钮
link: /guide/overview
features:
- icon: 🔐
title: 特性标题
details: 特性描述
link: /features/
linkText: 了解详情
---1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
frontmatter page 布局（自定义单页）
yaml
---
layout: page
---1
2
3
2
3
速查对照
| 想要 | 写法 |
|---|---|
| 提示框 | ::: tip ... ::: |
| 折叠 | ::: details 标题 ... ::: |
| 徽章 | <Badge type="tip" text="..." /> |
| 行高亮 | ```ts{1,3-5} |
| 错误标记 | // [!code error] |
| 多语言切换 | ::: code-group |
| 流程图 | ```mermaid |
| 任务列表 | - [x] 已完成 |
| 脚注 | [^1] + [^1]: 内容 |
| 表格 | 丨列1丨列2丨 |
| 自动目录 | [[toc]] |
下一步
- Markdown 扩展演示 — 看本页所有语法的实际渲染效果
- VitePress 官方文档 — 完整语法参考