vitepress-template

Appearance

[[[[Switch to English]]]]

Markdown 扩展 ​

VitePress 对标准 Markdown 进行了一些扩展，提供了强大的功能来增强您的文档。

内置扩展 ​

语法高亮 ​

VitePress 使用 Shiki 进行语法高亮，并提供以下附加功能：

js
export default {
  data() {
    return {
      message: 'Highlighted line!'
    }
  }
}

行号 ​

为代码块添加行号：

js
function hello() {
  console.log('Hello, World!')
  return 'Hello'
}

行高亮 ​

高亮特定行：

js
export default {
  name: 'MyComponent',
  props: {
    title: String,
    description: String,
    author: String
  },
  methods: {
    handleClick() {
      // Handle click event
    }
  }
}

自定义容器 ​

信息容器 ​

INFO

这是一个信息说明。用它来提供额外的上下文或有用的提示。

提示容器 ​

TIP

这是一个提示。用它来分享最佳实践或有用的建议。

警告容器 ​

WARNING

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

危险容器 ​

DANGER

这是一个危险警告。用它来强调关键信息或潜在问题。

详情容器 ​

点击展开

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

高级功能 ​

导入代码块 ​

从外部文件导入代码：

js
// Import code from external files
// Example: <<< @/components/Example.vue

部分导入 ​

使用 VS Code 区域导入文件的特定部分：

js
// Import specific parts of a file
// Example: <<< @/components/Example.vue{1-10}

指定语言的内联代码 ​

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

表情符号 ​

VitePress 支持表情符号：🎉 ✨ 🚀 💡

数学表达式 ​

内联数学公式：$E = mc^2$

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

自定义容器 ​

您可以创建具有自己样式的自定义容器：

::: custom-container Custom Container 这是一个具有您自己样式的自定义容器。 :::

代码组 ​

使用选项卡对多个代码块进行分组：

js
export default {
  title: 'My Site',
  description: 'My awesome site'
}
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. 回到第一级

链接 ​

内部链接 ​

外部链接 ​

带标题的链接 ​

VitePress

最佳实践 ​

代码块 ​

  • 始终指定语言以获得更好的高亮效果
  • 使用行高亮来吸引对重要代码部分的注意
  • 保持代码示例简洁明了

容器 ​

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

链接 ​

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

内容组织 ​

  • 使用清晰的标题和副标题
  • 将相关内容分组
  • 保持段落简短易读