Markdown 扩展

VitePress 在标准 Markdown 基础上扩展了多种强大特性，以增强你的文档体验。

内置扩展

语法高亮

VitePress 使用 Shiki 提供语法高亮，并带有更多增强能力：

export default {
  data() {
    return {
      message: '已高亮的行！'
    }
  }
}

行号

为代码块添加行号：

function hello() {
  console.log('你好，世界！')
  return 'Hello'
}

行高亮

高亮特定行：

export default {
  name: 'MyComponent',
  props: {
    title: String,
    description: String,
    author: String
  },
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
}

自定义容器

信息容器

INFO

这是一条说明性提示。可用于提供额外上下文或实用提示。

提示容器

TIP

这是一个提示。可用于分享最佳实践或有用建议。

警告容器

WARNING

这是一个警告。用于提醒潜在问题或重要注意事项。

危险容器

DANGER

这是一个危险警告。用于强调关键信息或潜在风险。

详情容器

点击展开

此内容默认隐藏，点击摘要可展开。

高级特性

导入代码块

从外部文件导入代码：

// 从外部文件导入代码
// 示例：<<< @/components/Example.vue

部分导入

结合 VS Code 区域仅导入文件的特定部分：

// 仅导入文件的特定部分
// 示例：<<< @/components/Example.vue{1-10}

带语言的行内代码

为行内代码指定语言：const message = 'Hello'

表情符号

VitePress 支持表情符号：🎉 🚀 💡

数学公式

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

块级公式： $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

自定义容器（示例）

你可以创建带有自定义样式的容器：

::: custom-container 自定义容器 这是一个带有自定义样式的容器。 :::

代码分组

将多个代码块以标签页分组展示：

config.js

export default {
  title: 'My Site',
  description: 'My awesome site'
}

config.ts

export default {
  title: 'My Site',
  description: 'My awesome site'
} as const

文件树

展示文件结构：

root/
├── .vitepress/
│  ├── config.ts
│  └── theme/
│      └── index.ts
├── docs/
│  ├── index.md
│  └── guide/
│      └── getting-started.md
└── package.json

表格

增强的表格支持：

功能	支持	说明
语法高亮	✅	由 Shiki 提供
自定义容器	✅	内置与自定义均可
数学公式	✅	支持 KaTeX
代码分组	✅	以标签页展示
文件树	✅	结构化展示

列表

任务清单

• [x] 创建文档
• [x] 添加示例
• [ ] 部署到生产环境
• [ ] 添加统计分析

嵌套列表

1. 第一级
   • 第二级
     • 第三级
       • 第四级
2. 返回第一级

链接

内部链接

• 首页
• 快速开始
• API 示例

外部链接

• VitePress 文档
• Vue.js
• Vite

带标题的链接

VitePress

最佳实践

代码块

• 始终为代码块指定语言以获得更好的高亮
• 对关键代码片段使用行高亮
• 保持示例代码简洁聚焦

容器

• 针对不同内容选择合适的容器类型
• 保持容器内容相关且简洁
• 谨慎使用自定义容器

链接

• 使用描述性链接文本
• 为外部链接提供标题
• 定期检查所有内部链接

内容组织

• 使用清晰的标题与小节
• 将相关内容归组
• 段落简短、可读性强