VitePress 文档格式示例
本页展示 VitePress 在 Markdown 之上的专属扩展格式——这些写法在标准 Markdown 中不存在，是 VitePress 提供的增强能力。
每个示例都按三部分呈现：语法说明 → 示例写法（原始源码）→ 实际效果（渲染结果）。
1. 自定义容器（提示框）
语法说明：以 ::: 类型 开头、::: 结尾即可创建语义化提示框。常用类型：tip、info、warning、danger；details 为可折叠容器，类型后可跟标题文字。
示例写法：
::: tip 提示
这是 `tip` 容器，用于友好的提示信息。
:::
::: warning 警告
这是 `warning` 容器，用于需要注意的事项。
:::
::: details 点击展开查看更多
这是可折叠容器，默认收起，点击标题展开。可放任意内容，包括代码：
```ts
console.log("折叠区域内的代码")
```
:::实际效果：
提示
这是 tip 容器，用于友好的提示信息。
信息
这是 info 容器，用于补充说明。
警告
这是 warning 容器，用于需要注意的事项。
危险
这是 danger 容器，用于严重警告。
点击展开查看更多
这是 details 可折叠容器，默认收起，点击标题展开。可以放任意内容，包括代码：
console.log("折叠区域内的代码")2. 徽章（Badge）
语法说明：行内徽章用 :badge[文字]{.样式} 表示，可用样式有 .info、.tip、.warning、.danger。
示例写法：
新功能 :badge[NEW]{.info}、实验性 :badge[beta]{.warning}、已废弃 :badge[deprecated]{.danger}实际效果：
新功能 :badge[NEW]{.info}、实验性 :badge[beta]{.warning}、已废弃 :badge[deprecated]
3. 代码组（多标签切换）
语法说明：::: code-group 把多个同义代码块以标签页形式切换，常用于不同包管理器的命令。代码块语言后的方括号文字 [标签] 显示为选项卡标题；带文件名标注时还会配合 group-icons 显示图标（见「插件应用示例」页）。
示例写法：
::: code-group
```bash [npm]
npm install vitepress
```
```bash [pnpm]
pnpm add vitepress
```
```bash [yarn]
yarn add vitepress
```
:::实际效果：
npm install vitepresspnpm add vitepressyarn add vitepress4. 代码块增强
4.1 行高亮
语法说明：在代码块语言后加 {行号}（如 {2,4-5}）高亮指定行。
示例写法：
```ts {2,4-5}
function demo() {
const a = 1 // 高亮
const b = 2
const c = 3 // 高亮
const d = 4 // 高亮
}
```实际效果：
function demo() {
const a = 1 // 高亮
const b = 2
const c = 3 // 高亮
const d = 4 // 高亮
}4.2 行号
语法说明：在代码块语言后加 showLineNumbers 显示行号。
示例写法：
```ts showLineNumbers
console.log(1)
console.log(2)
console.log(3)
```实际效果：
console.log(1)
console.log(2)
console.log(3)4.3 Diff 高亮
语法说明：在代码块语言后加 {diff}，配合 - / + 前缀高亮删除与新增行。
示例写法：
```ts {diff}
- const old = 1
+ const now = 2
```实际效果：
- const old = 1
+ const now = 25. 从文件导入代码片段
语法说明：用 <<< @/相对路径 可直接把某个源文件嵌入文档，@ 指向文档源目录（本项目为 docs/）。适合展示真实、可维护的示例代码。
示例写法（导入本仓库的 README.md 前 5 行）：
<<< @/../README.md {1-5}实际效果（展示 README.md 的前 5 行）：
# VitePress Template
6. Frontmatter 页面配置
语法说明：每篇文档顶部 --- 区域可配置页面元信息。常用字段：title（标题）、description（SEO 描述）、layout（doc 或 home）、outline（右侧大纲深度）、aside（是否显示右栏）、prev/next（自定义上下页）。
示例写法（当前页使用的）：
---
title: VitePress 文档格式示例
description: 展示 VitePress 专属的扩展格式与可达到的排版效果
---实际效果：上表字段已作用于本页——例如本页标题、右侧大纲、以及「上一篇 / 下一篇」导航均由 frontmatter 与配置驱动（可滚动到页面顶部与底部查看）。
首页布局（layout: home）示例见 docs/index.md：
---
layout: home
hero:
name: My Docs
text: A VitePress Documentation Site
actions:
- theme: brand
text: Get Started
link: /guide/getting-started
features:
- title: Search
details: Built-in full-text local search.
---7. 静态资源引用
语法说明：放在 docs/.vitepress/public/ 的资源以 / 开头引用（如 /logo.svg），构建时原样拷贝到产物根目录；其余图片建议与文档同目录用相对路径引用（如 ./logo.svg）以避免构建报错。
示例写法：
 <!-- public 目录资源 -->
 <!-- 与文档同目录 -->实际效果（public 目录资源，可点击放大）：
8. 全站搜索
语法说明：搜索由 themeConfig.search.provider: "local" 提供内置全文检索，按 Ctrl+K（macOS 为 ⌘+K）唤起。
示例写法：
按 <kbd>Ctrl</kbd> + <kbd>K</kbd> 唤起搜索。实际效果：
按 Ctrl + K 唤起搜索。
9. 导航与侧边栏
语法说明：导航栏与侧边栏在 docs/.vitepress/config.ts 的 themeConfig.nav / themeConfig.sidebar 中配置。本页所在的「Showcase」分组即通过以下配置新增：
示例写法：
nav: [
{ text: "Showcase", link: "/showcase/markdown" },
],
sidebar: {
"/showcase/": [
{
text: "Showcase 示例",
items: [
{ text: "Markdown 格式", link: "/showcase/markdown" },
{ text: "VitePress 格式", link: "/showcase/vitepress" },
{ text: "插件应用示例", link: "/showcase/plugins" },
],
},
],
},实际效果：上方配置已生效——顶部导航栏的「Showcase」与左侧本分组的三篇文档即由此生成。