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 |

输出

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare 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
  }
}
  • 示例:
ImageImage

高级配置

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'))
    }
  }
}