VitePress
01. 安装&运行
1.1 初始化项目
$ npx vitepress init$ pnpm vitepress init$ bunx vitepress init1.2 运行
$ npm run docs:dev$ pnpm run docs:dev$ yarn docs:dev$ bunx run docs:dev1.3 打包
$ npm run docs:build输出目录docs/.vitepress/dist
02. Markdown 语法
参考官网
标题锚点
自定义锚点
md
# 使用自定义锚点 {#my-anchor}链接
内部链接
外部链接
frontmatter
GitHub 风格的表格
输入
md
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |输出
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Emoji 🎉
输入
md
:tada: :100:输出
🎉 💯
这里可以找到所有支持的 emoji 列表。
目录表（TOC）
输入
[[toc]]输出
自定义容器
默认标题
输入
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.
:::输出
信息
This is an info box.
提示
This is a tip.
警告
This is a warning.
危险
This is a dangerous warning.
详细信息
This is a details block.
自定义标题
输入
md
::: danger STOP
危险区域，请勿继续
:::
::: details 点我查看代码
```js
console.log("Hello, VitePress!");
```
:::输出
STOP
危险区域，请勿继续
点我查看代码
js
console.log("Hello, VitePress!");代码块中的语法高亮
输入
md
```js
export default {
name: "MyComponent",
// ...
};
```md
```html
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
```输出
js
export default {
name: "MyComponent",
// ...
};vue
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>在 Shikiji 的代码仓库中，可以找到合法的编程语言列表。
在代码块中实现行高亮
单行高亮
输入
md
```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}
输入
md
```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'
}
}
}
```输出
js
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 hl] 注释实现行高亮。
输入
md
```js
export default {
data() {
return {
msg: "Highlighted!", // [!code hl]
};
},
};
```输出
js
export default {
data() {
return {
msg: "Highlighted!",
};
},
};代码块中聚焦
输入
md
```js
export default {
data() {
return {
msg: "Focused!", // [!code focus]
};
},
};
```输出
js
export default {
data() {
return {
msg: "Focused!",
};
},
};代码块中的颜色差异
输入
md
```js
export default {
data () {
return {
msg: 'Removed' // [!code --]
msg: 'Added' // [!code ++]
}
}
}
```输出
js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}高亮“错误”和“警告”
输入
md
```js
export default {
data() {
return {
msg: "Error", // [!code error]
msg: "Warning", // [!code warning]
};
},
};
```输出
js
export default {
data() {
return {
msg: "Error",
msg: "Warning",
};
},
};行号
可以通过以下配置为每个代码块启用行号：
js
export default {
markdown: {
lineNumbers: true,
},
};输入
md
```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'
```输出
ts
// 默认禁用行号
const line2 = "This is line 2";
const line3 = "This is line 3";ts
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'ts
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'导入代码片段
输入
md
<<< ./snippet-with-region.js#snippet {1,2,4-6 js:line-numbers}输出
js
let a = 1;
let b = 2;
function test() {
return a + b;
}./snippet-with-region.js
js
let other = 888;
// #region snippet
let a = 1;
let b = 2;
function test() {
return a + b;
}
// #endregion snippet
let another = 999;代码组
输入
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;在代码组中导入代码片段
输入
md
::: code-group
<!-- 文件名默认用作标题 -->
<<< ./snippet-with-region.js [snippet]
<!-- 也可以提供定制的代码组 -->
<<< ./snippet-with-region.js#snippet {1,2,4-6 js:line-numbers} [snippet with region]
:::输出
js
let other = 888;
// #region snippet
let a = 1;
let b = 2;
function test() {
return a + b;
}
// #endregion snippet
let another = 999;js
let a = 1;
let b = 2;
function test() {
return a + b;
}包含 markdown 文件
提示
所选行范围的格式可以是： {3,}、 {,10}、{1,10}
输入： <!-- @include: ./vitePress-import.md{3,} -->
./vitePress-import.md 3-结尾 内容：
md
### Sub Menu
> This is a test.输出：
Sub Menu
This is a test.
数学方程
图片懒加载
js
export default {
markdown: {
image: {
// 默认禁用图片懒加载
lazyLoading: true,
},
},
};在 Markdown 中使用 Vue
2
123
The count is: 0
{
"title": "Markdown 扩展",
"titleTemplate": "模版",
"description": "描述",
"frontmatter": {
"title": "Markdown 扩展",
"titleTemplate": "模版",
"description": "描述",
"layout": "doc",
"navbar": true,
"sidebar": true,
"aside": "right",
"outline": [
2,
3
],
"editLink": true,
"footer": true,
"pageClass": "custom-page-class-123"
},
"headers": [],
"relativePath": "views/note/vitePress.md",
"filePath": "views/note/vitePress.md",
"lastUpdated": 1706593644000
}