Markdown Extension Examples
配置封面
::: notice 封面的图片资源也可以相对引用。"./xxx"取相对路径，“/xxx”取“public/xxx” :::
---
title: Hello World
date: 2026-01-01
author: Me
layout: doc
---配置tags
博客提供tags筛选功能，如有多个tags请用空格隔开，或者使用obsidian的yml格式。
---
title: Hello World
date: 2026-01-01
author: Me
tags:
- VitePress
- 写作技巧
layout: doc
---写作技巧
内部链接
内部链接将转换为单页导航的路由链接。此外，子目录中包含的每个 index.md 都会自动转换为 index.html，并带有相应的 URL /。
例如，给定以下目录结构：
.
├─ index.md
├─ foo
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ index.md
├─ three.md
└─ four.md假设现在处于 foo/one.md 文件中：
[Home](/) <!-- 将用户导航至根目录下的 index.html -->
[foo](/foo/) <!-- 将用户导航至目录 foo 下的 index.html -->
[foo heading](./#heading) <!-- 将用户锚定到目录 foo 下的index文件中的一个标题上 -->
[bar - three](../bar/three) <!-- 可以省略扩展名 -->
[bar - three](../bar/three.md) <!-- 可以添加 .md -->
[bar - four](../bar/four.html) <!-- 或者可以添加 .html -->Emoji 🎉
输入
:tada: :100:输出
🎉 💯
这里可以找到所有支持的 emoji 列表。
自定义容器
自定义容器可以通过它们的类型、标题和内容来定义。
默认标题
输入
::: 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.
自定义标题
可以通过在容器的 "type" 之后附加文本来设置自定义标题。
输入
::: danger STOP
危险区域，请勿继续
:::
::: details 点我查看代码
```js
console.log('Hello, VitePress!')
```
:::输出
STOP
危险区域，请勿继续
点我查看代码
console.log('Hello, VitePress!')此外，可以通过在站点配置中添加以下内容来全局设置自定义标题，如果不是用英语书写，这会很有帮助：
// config.ts
export default defineConfig({
// ...
markdown: {
container: {
tipLabel: '提示',
warningLabel: '警告',
dangerLabel: '危险',
infoLabel: '信息',
detailsLabel: '详细信息'
}
}
// ...
})GitHub 风格的警报
VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。它们和自定义容器的渲染方式相同。
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。
> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。
> [!IMPORTANT]
> 对用户达成目标至关重要的信息。
> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。
> [!CAUTION]
> 行为可能带来的负面影响。NOTE
强调用户在快速浏览文档时也不应忽略的重要信息。
TIP
有助于用户更顺利达成目标的建议性信息。
IMPORTANT
对用户达成目标至关重要的信息。
WARNING
因为可能存在风险，所以需要用户立即关注的关键内容。
CAUTION
行为可能带来的负面影响。
代码块中的语法高亮
VitePress 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
输入
```js
export default {
name: 'MyComponent',
// ...
}
``````html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
```输出
export default {
name: 'MyComponent'
// ...
}<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>在 Shiki 的代码仓库中，可以找到合法的编程语言列表。
还可以在全局配置中自定义语法高亮主题、配置语言别名和自定义语言标签。有关详细信息，参见 markdown 选项得到更多信息。
在代码块中实现行高亮
输入
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```输出
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}除了单行之外，还可以指定多个单行、多行，或两者均指定：
- 多行：例如
{5-8}、{3-10}、{10-17} - 多个单行：例如
{4,7,9} - 多行与单行：例如
{4,7-13,16,23-27,40}
输入
```js{1,4,6-8}
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum'
}
}
}
```输出
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum',
}
}
}也可以使用 // [!code highlight] 注释实现行高亮。
输入
```js
export default {
data () {
return {
msg: 'Highlighted!' // [!!code highlight]
}
}
}
```输出
export default {
data() {
return {
msg: 'Highlighted!'
}
}
}代码块中聚焦
在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。
此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。
输入
```js
export default {
data () {
return {
msg: 'Focused!' // [!!code focus]
}
}
}
```输出
export default {
data() {
return {
msg: 'Focused!'
}
}
}代码块中的颜色差异
在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。
输入
```js
export default {
data () {
return {
msg: 'Removed' // [!!code --]
msg: 'Added' // [!!code ++]
}
}
}
```输出
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]
}
}
}
```输出
export default {
data() {
return {
msg: 'Error',
msg: 'Warning'
}
}
}行号
可以通过以下配置为每个代码块启用行号：
export default {
markdown: {
lineNumbers: true
}
}查看 markdown 选项 获取更多信息。
可以在代码块中添加 :line-numbers / :no-line-numbers 标记来覆盖在配置中的设置。
还可以通过在 :line-numbers 之后添加 = 来自定义起始行号，例如 :line-numbers=2 表示代码块中的行号从 2 开始。
输入
```ts {1}
// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers {1}
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```输出
// 默认禁用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'代码组
可以像这样对多个代码块进行分组：
输入
::: 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
```
:::输出
/**
* @type {import('vitepress').UserConfig}
*/
const config = {
// ...
}
export default configimport type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default configMore
Check out the documentation for the full list of markdown extensions.