Markdown 写作指南

学会用 Markdown 写内容，VitePress 支持很多增强功能。

基础语法

标题

# 一级标题
## 二级标题
### 三级标题

文字样式

**粗体文字**
*斜体文字*
~~删除线~~

效果：粗体、斜体、删除线

列表

- 无序列表项 1
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2

链接

[链接文字](https://example.com)
[内部链接](/guide/getting-started)

---

代码块

基础代码块

```js
const hello = 'Hello VitePress!'
console.log(hello)
```

效果：

const hello = 'Hello VitePress!'
console.log(hello)

代码高亮行

```js{2,4-6}
export default {
  name: 'Hello',  // 这行会高亮
  data() {
    return {
      message: 'VitePress'  // 这几行都会高亮
    }
  }
}
```

语法说明

• {2} - 高亮第 2 行
• {2,4-6} - 高亮第 2 行和第 4-6 行

---

自定义容器

VitePress 提供了特殊的提示框：

::: tip 小贴士
这是一个提示框
:::

::: warning 注意
这是一个警告框
:::

::: danger 危险
这是一个危险提示框
:::

::: details 点击展开
这是可以折叠的内容
:::

效果：

小贴士

这是一个提示框

注意

这是一个警告框

危险

这是一个危险提示框

点击展开

这是可以折叠的内容

---

表格

| 功能 | 支持 | 说明 |
| --- | --- | --- |
| Markdown | ✅ | 完整支持 |
| 搜索 | ✅ | 内置搜索 |
| 深色模式 | ✅ | 自动支持 |

效果：

功能	支持	说明
Markdown	✅	完整支持
搜索	✅	内置搜索
深色模式	✅	自动支持

---

Emoji 表情

:tada: :100: :rocket:

效果：🎉 💯 🚀

查看完整 Emoji 列表：Emoji 速查表

---

图片

![图片描述](/logo.svg)

小贴士

把图片放在 docs/public/ 文件夹，然后用 /image.png 引用。

---

目录

使用 [[toc]] 自动生成页面目录：

[[toc]]

---

代码组

可以将多个代码块分组显示：

::: code-group
```js [config.js]
export default {
  title: 'VitePress'
}
```

```ts [config.ts]
export default {
  title: 'VitePress'
}
```
:::

---

Front Matter

在 Markdown 文件顶部使用 YAML 格式配置：

---
title: 页面标题
description: 页面描述
---

# 内容开始...

---

更多功能

查看官方 Markdown 扩展文档了解更多功能。