docs: Update docs for "line numbers"

hyeonman · Jun 10, 2018 · 58eb57e · 58eb57e
1 parent 87b1233
commit 58eb57e
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 1 deletion.
diff --git a/README.md b/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 --git a/docs/.vuepress/public/line-numbers-desktop.png b/docs/.vuepress/public/line-numbers-desktop.png
diff --git a/docs/.vuepress/public/line-numbers-mobile.gif b/docs/.vuepress/public/line-numbers-mobile.gif
diff --git a/docs/config/README.md b/docs/config/README.md
@@ -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 --git a/docs/guide/markdown.md b/docs/guide/markdown.md
@@ -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 --git a/docs/zh/config/README.md b/docs/zh/config/README.md
@@ -144,6 +144,10 @@ module.exports = {
 
 是否在每个代码块的左侧显示行号。
 
+**Also see:**
+
+- [行号](../guide/markdown.md#行号)
+
 ### markdown.anchor
 
 - 类型: `Object`

diff --git a/docs/zh/guide/markdown.md b/docs/zh/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"/>
 
 你可以通过下述的语法导入已经存在的文件中的代码段：