Markdown 语法示例

本页汇总 Markdown 及本模板所支持扩展语法的常见写法，可直接作为「写法速查表」。

本模板在默认主题基础上启用了：
@vuepress/plugin-shiki：代码高亮（github-dark 主题）
@vuepress/plugin-container：自定义容器 info / note / caution
默认主题内置的 markdown-hint（tip / warning / danger / details）与 markdown-tab（code-group）

1. 标题

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

一级标题示例

二级标题示例

三级标题示例

2. 强调

**加粗**、_斜体_、_**加斜又加粗**_、~~删除线~~、`行内代码`

加粗、斜体、加斜又加粗、~~删除线~~、行内代码

3. 链接与图片

[内部链接](/guide/)
[外部链接](https://v2.vuepress.vuejs.org/)
[带标题的链接](https://v2.vuepress.vuejs.org/ 'VuePress 文档')

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

内部链接（指南首页）外部链接（VuePress 官网）

4. 列表

无序列表

- 苹果
- 香蕉
  - 水果蕉
  - 芭蕉
- 橙子

苹果
香蕉
- 水果蕉
- 芭蕉
橙子

有序列表

1. 第一步
2. 第二步
3. 第三步

第一步
第二步
第三步

任务列表

- [x] 已完成任务
- [ ] 未完成任务
- [ ] 另一个待办

[x] 已完成任务
[ ] 未完成任务
[ ] 另一个待办

5. 引用

> 这是一段引用。
>
> 可以换行，也可以嵌套：
>
> > 嵌套引用。

这是一段引用。
可以换行，也可以嵌套：
嵌套引用。

6. 代码块

使用三个反引号包裹，并标注语言以启用高亮：

```ts
interface User {
  id: number
  name: string
}

const user: User = { id: 1, name: 'VuePress' }
console.log(user)
```

interface User {
  id: number
  name: string
}

const user: User = { id: 1, name: 'VuePress' }
console.log(user)

其他语言也支持，例如 JSON：

{
  "name": "vuepress-template",
  "version": "1.0.0"
}

7. 表格

| 语法    | 说明   | 是否支持 |
| ------- | ------ | -------- |
| `**x**` | 加粗   | ✅       |
| `*x*`   | 斜体   | ✅       |
| `~~x~~` | 删除线 | ✅       |

语法	说明	是否支持
`x`	加粗	✅
`x`	斜体	✅
`~~x~~`	删除线	✅

8. 分割线

---

9. 脚注

这里有一个脚注引用[^1]。

[^1]: 这是脚注内容，会显示在页面底部。

这里有一个脚注引用^1。

10. 表情符号（Emoji）

:smile: :rocket: :heart: :tada:

😄 🚀 ❤️ 🎉

11. 内联 HTML

Markdown 支持直接书写 HTML：

<div style="padding: 12px; border: 1px solid #2d8cf0; border-radius: 8px;">
  这是一个带样式的 HTML 块。
</div>

这是一个带样式的 HTML 块。

12. Frontmatter

每篇文档顶部的 --- 区域是 frontmatter，用于设置页面级元数据：

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

正文内容……

13. 默认主题容器（markdown-hint）

::: tip
这是一个 tip 提示。
:::

::: warning
这是一个 warning 警告。
:::

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

::: details
点击展开查看详情内容。
:::

提示

这是一个 tip 提示。

注意

这是一个 warning 警告。

警告

这是一个 danger 危险提示。

详情

点击展开查看详情内容（可包含任意 Markdown，甚至代码）：

console.log('details 内也可以写代码')

14. 自定义容器（本模板 plugin-container）

::: info 信息
这是 info 容器，可带标题。
:::

::: note
这是 note 容器。
:::

::: caution
这是 caution 容器。
:::

信息

这是 info 容器，可带标题。

这是 note 容器。

这是 caution 容器。

15. 代码组（code-group）

::: code-group

```bash [npm]
npm install vuepress
```

pnpm add vuepress

:::


渲染效果：

::: code-group

```bash [npm]
npm install vuepress

pnpm add vuepress

:::

16. 嵌入 Vue 组件

放在 .vuepress/components 下的组件会被自动全局注册，文件名即组件名：

<RepoCard repo="vuejs/core" />

RepoCard 是本模板自带的示例组件（.vuepress/components/RepoCard.vue），用于演示「全局组件自动注册 + 在 Markdown 中直接调用」。

17. 数学公式（需额外插件）

本模板默认未启用 KaTeX / mathjax 插件。如需公式支持，可安装 @vuepress/plugin-mathjax（或 @vuepress/plugin-katex）并在 plugins.ts 中注册。

以上即为本模板支持的 Markdown 主要写法。更多细节请参阅 VuePress 官方 Markdown 文档。