markdown
标题锚点
html
# 使用自定义锚点 {#my-anchor}目录表
[[toc]]自定义容器
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::INFO
This is an info box.
TIP
This is a tip.
WARNING
This is a warning.
DANGER
This is a dangerous warning.
Details
This is a details block.
GitHub 风格的警报
md
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。NOTE
强调用户在快速浏览文档时也不应忽略的重要信息。
TIP
有助于用户更顺利达成目标的建议性信息。
IMPORTANT
对用户达成目标至关重要的信息。
WARNING
因为可能存在风险，所以需要用户立即关注的关键内容。
CAUTION
行为可能带来的负面影响。
在代码块中实现行高亮
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}除了单行之外，还可以指定多个单行、多行，或两者均指定：
多行：例如 {5-8}、{3-10}、{10-17} 多个单行：例如 {4,7,9} 多行与单行：例如 {4,7-13,16,23-27,40}
也可以使用 // [!code highlight] 注释实现行高亮。
代码块中聚焦
在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。
此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。
```js
export default {
data() {
return {
msg: "Focused!", // [!code focus]
};
},
};
```代码块中的颜色差异
在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。
```js
export default {
data () {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
```js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}高亮“错误”和“警告”
在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色。
```js
export default {
data() {
return {
msg: "Error", // [!code error]
msg: "Warning", // [!code warning]
};
},
};
```js
export default {
data() {
return {
msg: "Error",
msg: "Warning",
};
},
};代码组
md
::: code-group
```js [config.js]
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
};
export default config;
```
```ts [config.ts]
import type { UserConfig } from "vitepress";
const config: UserConfig = {
// ...
};
export default config;
```
:::js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
};
export default config;ts
import type { UserConfig } from "vitepress";
const config: UserConfig = {
// ...
};
export default config;