Markdown Extension Examples
This page demonstrates some of the built-in markdown extensions provided by VitePress.
Here is an inline note.[1]
h2
h3
h4
h5
h6
Syntax Highlighting
VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:
Input
md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Output
js
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}1
2
3
4
5
6
7
2
3
4
5
6
7
VitePress 语法扩展
Input
md
::: 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.
:::1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Output
信息
This is an info box.
提示
This is a tip.
警告
This is a warning.
危险
This is a dangerous warning.
Click me to view the code
This is a details block.
GitHub 风格的
Input
md
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Output
NOTE
强调用户在快速浏览文档时也不应忽略的重要信息。
TIP
有助于用户更顺利达成目标的建议性信息。
IMPORTANT
对用户达成目标至关重要的信息。
WARNING
因为可能存在风险，所以需要用户立即关注的关键内容。
CAUTION
行为可能带来的负面影响。
代码块中实现行高亮
asm
jmp .1
add
ret
call1
2
3
4
5
2
3
4
5
代码分组
js
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
};
export default config;1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
ts
import type { UserConfig } from "vitepress";
const config: UserConfig = {
// ...
};
export default config;1
2
3
4
5
6
7
2
3
4
5
6
7
More
Check out the documentation for the full list of markdown extensions.
Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note. ↩︎