Markdown 拓展

链接

内部的、并以 .md or .html 结尾的链接，将会被转换成 <router-link> 用于 SPA 导航。

站内的每一个子文件夹都应当有一个 README.md 文件，它会被自动编译为 index.html。

::: tip
在链接到一个文件夹的 index.html 时，确保你的链接以 / 结尾，否则该链接将导致 404。比如，用 /config/ 而不是 /config。
:::

如果你想要链接到另一个 markdown 文件：

确保链接以 .html 或 .md 结尾；
确保路径大小写正确，因为路径的匹配是大小写敏感的。

示例

以如下的文件结构为例：

[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading anchor](/foo/#heading) <!-- 跳转到 foo/index.html 的特定 anchor 位置 -->
[foo - one](/foo/one.html) <!-- 具体文件可以使用 .html 结尾 -->
[foo - two](/foo/two.md) <!-- 也可以用 .md -->

外部的链接将会被自动地设置为 target="_blank" rel="noopener noreferrer":

vuejs.org

你可以自定义通过配置 config.markdown.externalLinks 来自定义外部链接的特性。

Front Matter

VuePress 提供了对 YAML front matter 开箱即用的支持:

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

这些数据可以在当前页的正文中使用，在任意的自定义或主题组件中，它可以通过 $page 来访问。

title 和 lang 的 meta 将会被自动地注入到当前的页面中，当然你也可以指定一些额外需要注入的 meta：

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

除了 YAML 之外，VuePress 也支持 JSON 或者格式的 front matter。

JSON front matter 需要以花括号开头和结尾：

---
{
  "title": "Blogging Like a Hacker",
  "lang": "en-US"
}
---

---toml
title = "Blogging Like a Hacker"
lang = "en-US"
---

Input

Output

Emoji

Input

:tada: :100:

Output

代码块中的行高亮

Input

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

Output

行号

你可以通过配置来为每个代码块显示行号：

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

示例:

你可以通过下述的语法导入已经存在的文件中的代码段：

<<< @/filepath

它也支持：

<<< @/filepath{highlightLines}

Input

<<< @/test/markdown/fragments/snippet.js{2}

Output

<<< @/test/markdown/fragments/snippet.js{2}

::: tip 注意
由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，此处的 @ 默认值是 process.cwd()。
:::

进阶配置

module.exports = {
  markdown: {
    // markdown-it-anchor 的选项
    anchor: { permalink: false },
    // markdown-it-toc 的选项
    toc: { includeLevel: [1, 2] },
    config: md => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-xxx'))
    }
}

Markdown 拓展

Markdown 拓展

链接

示例

Front Matter

Emoji

目录

代码块中的行高亮

行号

进阶配置