docs: add markdown advance

Author: zyao89

docs/markdown/advance/1-link.md

@@ -0,0 +1,37 @@
+# 链接
+
+## 内部链接
+
+网站内部的链接，将会被转换成 `<router-link>` 用于 SPA 导航。同时，站内的每一个文件夹下的 `README.md` 或者 `index.md` 文件都会被自动编译为 `index.html`，对应的链接将被视为 `/`。
+
+以如下的文件结构为例：
+
+```
+.
+├─ README.md
+├─ foo
+│  ├─ README.md
+│  ├─ one.md
+│  └─ two.md
+└─ bar
+   ├─ README.md
+   ├─ three.md
+   └─ four.md
+```
+
+假设你现在在 `foo/one.md` 中：
+
+``` md
+[Home](/) <!-- 跳转到根部的 README.md -->
+[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
+[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
+[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾（推荐） -->
+[bar - four](../bar/four.html) <!-- 也可以用 .html -->
+```
+
+## 外部链接
+
+外部的链接将会被自动地设置为  `target="_blank" rel="noopener noreferrer"`:
+
+- [vuejs.org](https://vuejs.org)
+- [VuePress on GitHub](https://github.com/vuejs/vuepress)

docs/markdown/advance/2-frontmatter.md

@@ -0,0 +1,14 @@
+# Front Matter
+
+VuePress 提供了对 [YAML front matter](https://jekyllrb.com/docs/frontmatter/) 开箱即用的支持:
+
+``` yaml
+---
+title: Blogging Like a Hacker
+lang: en-US
+---
+```
+
+这些数据可以在当前 markdown 的正文，或者是任意的自定义或主题组件中使用。
+
+想了解更多，请移步 [Front Matter](../../guide/deep/frontmatter.md)。

docs/markdown/advance/3-container.md

@@ -0,0 +1,67 @@
+# 自定义容器
+
+**输入**
+
+```md
+::: tip
+这是一个提示
+:::
+
+::: warning
+这是一个警告
+:::
+
+::: danger
+这是一个危险警告
+:::
+
+::: details
+这是一个详情块，在 IE / Edge 中不生效
+:::
+```
+
+**输出**
+
+::: tip
+这是一个提示
+:::
+
+::: warning
+这是一个警告
+:::
+
+::: danger
+这是一个危险警告
+:::
+
+::: details
+这是一个详情块，在 IE / Edge 中不生效
+:::
+
+你也可以自定义块中的标题：
+
+````md
+::: danger STOP
+危险区域，禁止通行
+:::
+
+::: details 点击查看代码
+```js
+console.log('你好，VuePress！')
+```
+:::
+````
+
+::: danger STOP
+危险区域，禁止通行
+:::
+
+::: details 点击查看代码
+```js
+console.log('你好，VuePress！')
+```
+:::
+
+**参考:**
+
+- [vuepress-plugin-container](https://vuepress.github.io/plugins/container/)

docs/markdown/advance/4-highlight.md

@@ -0,0 +1,168 @@
+# 高亮
+
+## 代码块中的语法高亮
+
+VuePress 使用了 [Prism](https://prismjs.com/) 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言，你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名：
+
+**输入**
+
+````
+``` js
+export default {
+  name: 'MyComponent',
+  // ...
+}
+```
+````
+
+**输出**
+
+``` js
+export default {
+  name: 'MyComponent',
+  // ...
+}
+```
+
+**输入**
+
+````
+``` html
+<ul>
+  <li
+    v-for="todo in todos"
+    :key="todo.id"
+  >
+    {{ todo.text }}
+  </li>
+</ul>
+```
+````
+
+**输出**
+
+``` html
+<ul>
+  <li
+    v-for="todo in todos"
+    :key="todo.id"
+  >
+    {{ todo.text }}
+  </li>
+</ul>
+```
+
+在 Prism 的网站上查看 [合法的语言列表](https://prismjs.com/#languages-list)。
+
+
+## 代码块中的行高亮
+
+**输入**
+
+````
+``` js {4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**输出**
+
+``` js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+除了单行以外，你也可指定多行，行数区间，或是两者都指定。
+
+- 行数区间: 例如 `{5-8}`, `{3-10}`, `{10-17}`
+- 多个单行: 例如 `{4,7,9}`
+- 行数区间与多个单行: 例如 `{4,7-13,16,23-27,40}`
+
+**Input**
+
+````
+``` 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: 'VuePress is awesome',
+      lorem: 'ipsum',
+    }
+  }
+}
+```
+````
+
+**Output**
+
+``` js{1,4,6-8}
+export default { // Highlighted
+  data () {
+    return {
+      msg: `Highlighted!
+      This line isn't highlighted,
+      but this and the next 2 are.`,
+      motd: 'VuePress is awesome',
+      lorem: 'ipsum',
+    }
+  }
+}
+```
+
+## 行号
+
+你可以通过配置来为每个代码块显示行号：
+
+``` js
+module.exports = {
+  markdown: {
+    lineNumbers: true
+  }
+}
+```
+
+<!-- TODO Support line numbers for specific fence block -->
+
+- 示例:
+
+<picture>
+  <source srcset="/line-numbers-desktop.png" media="(min-width: 719px)">
+  <img class="line-numbers-desktop-snap" alt="Image">
+</picture>
+
+<picture>
+  <source srcset="/line-numbers-mobile.gif" media="(max-width: 719px)">
+  <img class="line-numbers-mobile-snap" alt="Image">
+</picture>
+
+<style>
+  @media screen and (min-width:  719px) {
+    .line-numbers-mobile-snap {
+       display: none;
+    }
+  }
+  @media screen and (max-width:  719px) {
+    .line-numbers-desktop-snap {
+       display: none;
+    }
+    .line-numbers-mobile-snap {
+      max-width: none!important;
+      margin: 0 -1.5rem;
+      width: 100vw;
+    }
+  }
+</style>