[] 中括号内文字随便输，() 括号里的填一个 # 号加标题；无论是几级标题，都是一个 # 号
[点我跳转：基础功能](#基础功能)
对于指向内部 Markdown 文件的链接，尽可能使用相对路径，而不是绝对路径
<!-- 相对路径，目标文件相对于本文章所在位置 -->
<!-- 绝对路径，目标文件就是真实路径在哪 -->
内部链接引用
[点我跳转：Frontmatter文章中的大纲](./frontmatter.md#大纲)
外部链接引用
* [vuejs.org](<https://vuejs.org/>)
* [GitHub 上的 VitePress](<https://github.com/vuejs/vitepress>)
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
:tada: :100:
Emoji表情大全：**https://emojixd.com/**
[[toc]]
::: info
这是一条信息，info后面的文字可修改
:::
::: tip 说明
这是一个提示，tip后面的文字可修改
:::
::: warning 警告
这是一条警告，warning后面的文字可修改
:::
::: danger 危险
这是一个危险警告，danger后面的文字可修改
:::
::: details 点我查看
这是一条详情，details后面的文字可修改
:::
* VitePress <Badge type="info" text="default" />
* VitePress <Badge type="tip" text="^1.9.0" />
* VitePress <Badge type="warning" text="beta" />
* VitePress <Badge type="danger" text="caution" />
```md(常用的还有 `ts` `js` `yaml` `sh` 等等，但这里尽量不要出现中文)
中间写代码内容
### **语法突出**
在前反引号后可以写入代码的语法，渲染后会显示在代码块右上方
```markdown
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
### **行高亮**
```markdown
```ts{4}
export default defineConfig({
lang: 'zh-CN',
title: "VitePress",
description: "我的vitpress文档教程",
titleTemplate: '另起标题覆盖title' ,
})
### **聚焦代码**
在某一行后添加 `// [!code focus]` 注释会聚焦该行，并模糊代码的其他部分
```markdown
```ts{4}
export default defineConfig({
lang: 'zh-CN',
title: "VitePress",
description: "我的vitpress文档教程", // [!code focus]
titleTemplate: '另起标题覆盖title' ,
})
要聚焦连续多行，可以使用 `// [!code focus:<lines>]`
```markdown
```ts{2-5}
export default defineConfig({
lang: 'zh-CN', // [!code focus:5]
title: "VitePress",
description: "我的vitpress文档教程",
titleTemplate: '另起标题覆盖title' ,
})
### **增减差异**
在某一行上添加 `// [!code --]` 或 `// [!code ++]` 注释将创建该行的差异，同时保留代码块的颜色
```markdown
```ts{3-4}
export default defineConfig({
lang: 'zh-CN',
title: "VitePress",
description: "我的vitpress文档教程", // [!code --]
description: "更详细的vitpress中文文档教程", // [!code ++]
titleTemplate: '另起标题覆盖title' ,
})
### **错误和警告**
在某一行上添加 `// [!code warning]` 或 `// [!code error]` 注释会相应地为其着色
```markdown
```ts{4-5}
export default defineConfig({
lang: 'zh-CN',
title: "VitePress",
description: "我的vitpress文档教程", // [!code error]
description: "更详细的vitpress中文文档教程", // [!code warning]
titleTemplate: '另起标题覆盖title' ,
})
### **行号显示**
```markdown
export default defineConfig({
//markdown配置
markdown: {
//行号显示
lineNumbers: true,
},
})
如果你在某个代码块不想使用，可以通过 ts:no-line-numbers 来临时关闭
```ts:no-line-numbers
无行号演示
### **代码组**
```markdown
::: code-group
```sh [pnpm]
#查询pnpm版本
pnpm -v
#查询yarn版本
yarn -v
:::
### **代码块嵌套**
用4个反引号 ```` ，以此类推即可
```markdown
pnpm run docs:dev
```