Markdown扩展
标题
#加标题内容
md
# 一级标题
## 二级标题
### 三级标题代码组
md
::: code-group
```sh [npm]
npx vitepress dev docs
```
```sh [pnpm]
pnpm vitepress dev docs
```
:::输入
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 configts
import type { UserConfig } from 'vitepress'
const config: UserConfig = {
// ...
}
export default config文字加链接
md
[VitePress](https://vitejs.cn/vitepress/)图片显示及图片加链接
md
// 只显示图片不能点击放大
// 图片可点击放大
[](/image.jpg)代码组内显示
代码组外多加一层`，从三个变四个。想要显示更多依此类推：
md
````md
```sh [npm]
$ npx vitepress dev docs
```
````自定义容器
自定义容器可以通过它们的类型、标题和内容来定义。
默认标题
输入
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.
:::输出
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" 之后附加文本来设置自定义标题。
输入
md
::: danger STOP
危险区域，请勿继续
:::
::: details 点我查看代码
```js
console.log('Hello, VitePress!')
```
:::输出
STOP
危险区域，请勿继续
点我查看代码
js
console.log('Hello, VitePress!')此外，可以通过在站点配置中添加以下内容来全局设置自定义标题，如果不是用英语书写，这会很有帮助：
ts
// config.ts
export default defineConfig({
// ...
markdown: {
container: {
tipLabel: '提示',
warningLabel: '警告',
dangerLabel: '危险',
infoLabel: '信息',
detailsLabel: '详细信息'
}
}
// ...
})GitHub 风格的表格
输入
| 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 🎉
输入
:tada: :100:输出
🎉 💯
这里可以找到所有支持的 emoji 列表。
目录表 (TOC)
输入
[[toc]]输出
可以使用 markdown.toc 选项配置 TOC 的呈现效果。
在代码块中实现行高亮
输入
```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 --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。
输入
```js
export default {
data () {
return {
msg: 'Removed' // [!!code --]
msg: 'Added' // [!!code ++]
}
}
}
```输出
js
export default {
data () {
return {
msg: 'Removed'
msg: 'Added'
}
}
}