VitePress Markdown 功能演示

一份完整演示 VitePress Markdown 各项扩展功能的示例文件。

Frontmatter

---
title: Markdown 功能演示
description: 演示 VitePress 对标准 Markdown 和扩展语法的支持
outline: [2, 3]
---

Frontmatter 用于页面级配置，可覆盖站点默认设置。常用选项包括 title 、 description 、 outline （控制右侧大纲显示级别）、 layout （ doc / home / page ）等。

标题与链接

标准标题

VitePress 自动为 h2–h3 标题生成锚点链接，并在右侧显示页面大纲。

链接

• 外部链接
• 内部链接
• 相对路径链接

自定义容器

VitePress 内置五种容器： tip 、 info 、 warning 、 danger 、 details 。

提示

这是一条提示信息。

信息

这是一条信息。

警告

这是一条警告。

危险

这是一条危险提示。

点击查看详情

这是可折叠的内容区域，适合放置代码或补充说明。

容器标题可通过站点配置全局自定义，例如将 tipLabel 设为 “提示”。

GitHub 风格警报

NOTE

强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

有助于用户更顺利达成目标的建议性信息。

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险，所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

GitHub 风格警报的渲染效果与自定义容器一致。

代码块

基础语法高亮

export default {
  name: 'MyComponent',
  data() {
    return { msg: 'Hello VitePress' }
  }
}

VitePress 使用 Shiki 进行语法高亮，支持多种编程语言。

行高亮

export default {
  data() {
    return {
      msg: '这一行被高亮',
      status: 'active'
    }
  }
}

行高亮支持单行 {4} 、范围 {5-8} 、多个单行 {4,7,9} 及其组合。

行聚焦

export default {
  data() {
    return {
      focused: true
    }
  }
}

使用 // [!code focus] 注释聚焦特定行并模糊其他部分。

Diff 差异

export default {
  msg: 'Removed'
  msg: 'Added'
}

// [!code --] 和 // [!code ++] 标记删除和新增行。

错误与警告高亮

export default {
  msg: 'Error', 
  status: 'Warning'
}

// [!code error] 和 // [!code warning] 以不同颜色标记行。

行号

const line1 = '第一行'
const line2 = '第二行'
const line3 = '第三行'

通过 :line-numbers 标记启用行号， :line-numbers=2 可自定义起始行号。

代码组

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

export default defineConfig({ mode: 'ts' })

:::

渲染效果：

::: code-group

```js [config.js]
export default { mode: 'js' }

export default defineConfig({ mode: 'ts' })

:::

代码组将多个代码块组织为选项卡形式。

导入代码片段

从文件导入代码片段，支持行高亮和 VS Code 区域标记：

<<< @/snippets/example.js{2}

格式为 <<< @/文件路径{高亮行} ， @ 指向源码根目录。

数学公式

需安装 markdown-it-mathjax3 并在配置中启用 markdown.math 。

行内公式：$E = mc^2$

块级公式：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

在 Markdown 中使用 Vue

每个 Markdown 文件被编译为 Vue 组件，可使用插值、指令和组件。

插值

2

指令

123

脚本与样式

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

当前计数：{{ count }}

在 Markdown 顶部 frontmatter 之后可使用 <script setup> 定义响应式逻辑，用 <style module> 定义局部样式。

转义

使用 v-pre 阻止 Vue 解析：

{{此内容不会被解析}}

图片与资源

![VitePress Logo](/logo.svg)

图片支持懒加载，可在配置中启用 lazyLoad 选项。

相关配置

功能	配置位置
容器标题	markdown.container
代码行号	markdown.lineNumbers
数学公式	markdown.math
图片懒加载	markdown.lazyLoad

以上配置均在 .vitepress/config.ts 的 markdown 选项中设置。