Markdown 扩展示例
本页演示了 VitePress 提供的内置 markdown 扩展。
Emoji 🎉
输入
:tada: :100:
:white_check_mark: :negative_squared_cross_mark: :ballot_box_with_check:
:heavy_check_mark: :x: :triangular_flag_on_post:1
2
3
2
3
输出
🎉 💯 ✅ ❎ ☑️ ✔️ ❌ 🚩
这里可以找到所有支持的 emoji 列表。
目录表 (TOC)
[[toc]]1
点击查看目录
可以使用 markdown.toc 选项配置 TOC 的呈现效果。
导入代码片段
提醒
下面@/filepath是导入的文件路径。示例路径是@/public/snippet.js @ 的值对应于源代码根目录，默认情况下是 VitePress 项目根目录，除非配置了 srcDir。或者也可以从相对路径导入：
导入全部内容
<<< @/filepath
markdown
<<< @/public/snippet.js [snippet.js 别名]1
snippet.js 别名
js
// 导入代码片段示例
// #region snippet1
function foo1() {
// ..
}
// #endregion snippet1
// #region snippet2
function foo2() {
// ..
}
// #endregion snippet21
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
导入全部内容且高亮某一行
<<< @/filepath{高亮行号}
markdown
<<< @/public/snippet.js{3}1
snippet.js
js
// 导入代码片段示例
// #region snippet1
function foo1() {
// ..
}
// #endregion snippet1
// #region snippet2
function foo2() {
// ..
}
// #endregion snippet21
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
导入指定内容
可以使用 VS Code region 来只包含代码文件的相应部分。可以在文件目录后面的 # 符号后提供一个自定义的区域名：例如#region snippet1 和#endregion snippet1（不能使用中文名）
<<< @/filepath#该文件中自定义的区域名{高亮行号}
markdown
<<< @/public/snippet.js#snippet1{1}1
snippet.js
js
function foo1() {
// ..
}1
2
3
2
3
指定文件语言
<<< @/filepath#该文件中自定义的区域名{高亮行号 指定语言:显示行号}
markdown
<<< @/public/snippet.js#snippet1{1 vue:line-numbers=2}1
snippet.js
vue
function foo1() {
// ..
}2
3
4
3
4
代码组
markdown
::: 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;
```
<!-- 代码片段示例 -->
<<< @/public/snippet.js#snippet1{1,3 ts:line-numbers=1} [snippet.js 别名]
:::1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
ts
function foo1() {
// ..
}1
2
3
2
3
包含 markdown 文件
提醒
下面@/filepath是导入的文件路径。示例路径是@/public/snippet.md @ 的值对应于源代码根目录，默认情况下是 VitePress 项目根目录，除非配置了 srcDir。或者也可以从相对路径导入：
假设 snippet.md 文件内容时如下：
markdown
# snippet.md 的一级标题
# snippet.md 的二级标题
snippet.md 普通段落1
2
3
4
5
2
3
4
5
markdown
# Docs
## Basics
<!--@include: @/filepath-->1
2
3
4
5
2
3
4
5
等价代码
markdown
# Docs
## Basics
# snippet.md 的一级标题
# snippet.md 的二级标题
snippet.md 普通段落1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
更多
请查看文档 完整的 markdown 扩展列表.