docs: Update docs for "line numbers"

Author: ulivz

Diff for: README.md

@@ -23,7 +23,7 @@ https://vuepress.vuejs.org/
 * [Table of Contents](https://vuepress.vuejs.org/guide/markdown.html#table-of-contents)
 * [Custom Containers](https://vuepress.vuejs.org/guide/markdown.html#custom-containers)
 * [Line Highlighting](https://vuepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks)
-* [line Numbers](https://vuepress.vuejs.org/config/#markdown-linenumbers)
+* [Line Numbers](https://vuepress.vuejs.org/guide/markdown.html#line-numbers)
 * [Import Code Snippets](https://vuepress.vuejs.org/guide/markdown.html#import-code-snippets)
 
 **Using Vue in Markdown**

Diff for: docs/.vuepress/public/line-numbers-desktop.png

@@ -145,6 +145,10 @@ Provide config options to the used theme. The options will vary depending on the
 
 Whether to show line numbers to the left of each code blocks.
 
+**Also see:**
+
+- [Line Numbers](../guide/markdown.md#line-numbers)
+
 ### markdown.slugify
 
 - Type: `Function`

Diff for: docs/.vuepress/public/line-numbers-mobile.gif

@@ -224,6 +224,50 @@ export default {
 }
 ```
 
+## Line Numbers
+
+You can enable line numbers for each code blocks via config:
+
+``` js
+module.exports = {
+  markdown: {
+    lineNumbers: true
+  }
+}  
+```
+
+<!-- TODO Support line numbers for specific fence block -->
+
+- Demo:
+
+<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>
+
 ## Import Code Snippets <Badge text="Experimental" type="warn"/> <Badge text="0.10.1+" type="tip"/>
 
 You can import code snippets from existing files via following syntax:

Diff for: docs/config/README.md

@@ -144,6 +144,10 @@ module.exports = {
 
 是否在每个代码块的左侧显示行号。
 
+**Also see:**
+
+- [行号](../guide/markdown.md#行号)
+
 ### markdown.anchor
 
 - 类型: `Object`

Diff for: docs/guide/markdown.md

@@ -222,6 +222,50 @@ export default {
 }
 ```
 
+## 行号
+
+你可以通过配置来为每个代码块显示行号：
+
+``` 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>
+
 ## 导入代码段 <Badge text="Experimental" type="warn"/> <Badge text="0.10.1+" type="tip"/>
 
 你可以通过下述的语法导入已经存在的文件中的代码段：