Markdown 扩展
Header Anchors
所有标题将自动添加anchor链接，Anchor的渲染可以使用markdown.anchor 选项来配置。
链接
内部链接
内部链接将会转化成路由链接用于SPA导航。同时，每一个文件夹下的 index.md 文件都会被自动编译为 index.html，对应的链接将被视为 /。
以下列目录结构为例：
.
├─ index.md
├─ foo
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ bar
├─ index.md
├─ three.md
└─ four.md
假设你在foo/one.md中：
[Home](/) <!-- 跳转到根目录的index.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html-->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three) <!-- 你可以忽略扩展名 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐）-->
[bar - four](../bar/four.html) <!-- 也可以用 .html-->
页面后缀
页面和内部链接默认生成.html后缀。
外部链接
出站链接自动添加target="_blank" rel="noopener noreferrer"。
Frontmatter
提供YAML frontmatter开箱即用的支持。
---
title: Blogging Like a Hacker
lang: en-US
---
这些数据和所有自定义及主题组件一起提供给当前页面使用。
详见 Frontmatter.
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 |
表情符号 ????
输入
:tada: :100:
输出
???? ????
A list of all emojis is available.
目录
输入
[[toc]]
输出
TOC的渲染可通过 markdown.toc 选项来配置。
自定义容器
自定义容器可通过他们的类型、标题和内容来定义。
Default Title
输入
::: tip
This is a tip
:::
::: warning
This is a warning
:::
::: danger
This is a dangerous warning
:::
输出
TIP
This is a tip
WARNING
This is a warning
WARNING
This is a dangerous warning
自定义标题
输入
::: danger STOP
Danger zone, do not proceed
:::
输出
STOP
Danger zone, do not proceed
在语法块中的语法高亮
VitePress 通过 Prism来实现Markdown中语法块的语法高亮，使用了有色文本。 Prism 支持大量的编程语言，你需要做的只是在代码块的开始反引号后附加一个有效的语言别名：
输入
```js
export default {
name: 'MyComponent',
// ...
}
```
输出
export default {
name: 'MyComponent'
// ...
}
输入
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
```
输出
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
在Prism站点中可以查询 可用的语言列表 is available on Prism’s site.
代码块中的行高亮
输入
```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-7}
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',
}
}
}
行号
你可以通过配置为所有代码块启用行号：
module.exports = {
markdown: {
lineNumbers: true
}
}
- 示例：
高级配置
VitePress 使用 markdown-it 作为Markdown的渲染器。上述许多扩展是通过自定义插件实现。你可以通过 .vitepress/config.js中的markdown进一步定制markdown-it:
module.exports = {
markdown: {
// options for markdown-it-anchor
anchor: { permalink: false },
// options for markdown-it-toc
toc: { includeLevel: [1, 2] },
config: (md) => {
// use more markdown-it plugins!
md.use(require('markdown-it-xxx'))
}
}
}