Markdown 扩展

头信息锚点

头信息自动获得锚点链接。锚点的渲染可以用markdown.anchor来配置。

链接

YAML 头信息

YAML 头信息是开箱支持的:

---
title: Blogging Like a Hacker
lang: en-US
---

这些数据可以得到页面的其他部门,作$page跟多的自定义和主题组件。

title``lang将自动设置到正确的页面上。此外你可以指定额外的 meta 标签作为注入:

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---

GitHub-Style 表格

输入

| 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

Emoji

输入

:tada: :100:

输出

🎉 💯

内容表格

输入

[[toc]]

输出

渲染 TOC 可以用markdown.toc配置。

自定义容器

输入

::: 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

代码块高亮

输入

``` js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```
export default {
  data () {
    return {
      msg: 'Highlighted!'    }
  }
}

高级配置项

VuePress 使用markdown-it作为 markdown 的渲染器。以上很多扩展都提供自定义插件。你可以在.vuepress/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'))
    }
  }
}