Markdown 扩展

VitePress 使用 markdown-it 作为 Markdown 渲染器，并在此基础上添加了许多非常有用的扩展，让内容创作更加轻松和强大。

Frontmatter

V你可以在每个 Markdown 文件的顶部使用 YAML frontmatter 来定义元数据。这些数据可以在页面上、组件中以及配置文件中使用。

---
title: 我的文档标题
description: 这是一个页面的描述。
home: true
---

title 和 description 会被 VitePress 自动用来设置页面的 <title> 和 <meta name="description"> 标签。

标题锚点

所有的标题（# 到 ######）都会自动获得一个锚点链接，当鼠标悬停在标题上时，会显示一个可点击的 § 图标。这方便用户直接分享某个特定部分的链接。

链接

VitePress 会智能处理 Markdown 中的链接。指向 .md 文件的相对链接会被转换为正确的路由链接，而外部链接会自动添加 target="_blank" rel="noopener noreferrer"。

自定义容器

V你可以使用自定义容器来突出显示特定信息。这是一个非常实用的功能，用于展示提示、警告或危险信息。

语法

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

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

::: danger
这是一个危险警告
:::

::: details
这是一个可折叠的详情块

这里是更多信息...
:::

效果

TIP

这是一个提示

WARNING

这是一个警告

DANGER

这是一个危险警告

语法高亮

VitePress 内置了对代码块的语法高亮支持，底层使用的是 Shiki。你只需指定代码块的语言即可。

```javascript
export default {
  name: 'MyComponent'
}
```

行内高亮

你可以在代码块的语言后面加上 {} 来指定需要高亮的行。

```js{4-5,8}
// ... (代码)
const a = 1;
const b = 2;

function add(a, b) { 
  return a + b;      
}

add(a, b); 

```

• {4-5,8}: 高亮第 4、5、8 行。
• // [!code focus]: 聚焦高亮当前行。
• // [!code ++]: 添加高亮（绿色）。
• // [!code --]: 删除高亮（红色）。

导入代码片段

你可以从现有文件中直接导入代码片段，这对于展示真实的代码示例非常有用。

<<< @/path/to/your/code/file.js

你还可以指定导入的行范围：

<<< @/path/to/your/code/file.js{2-10}

在 Markdown 中使用 Vue

VitePress 的一大特色就是可以在 Markdown 文件中无缝使用 Vue 组件。你可以像在普通的 Vue 单文件组件（SFC）中一样使用它们，包括 Vue 的模板语法和组件。

这是一个 Markdown 段落。

<MyVueComponent :prop="someValue" />

{{ 1 + 1 }} <!-- 输出: 2 -->

这为创建丰富的交互式文档提供了无限可能。