diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md index ce92d16591..f6ab0cb99f 100644 --- a/packages/docs/docs/guide/markdown.md +++ b/packages/docs/docs/guide/markdown.md @@ -121,7 +121,7 @@ or Rendering of TOC can be configured using the [`markdown.toc`](../config/README.md#markdown-toc) option, or as props of [TOC component](./using-vue.md#toc), like ``. -## Custom Containers +## Custom Containers **Input** @@ -165,6 +165,10 @@ Danger zone, do not proceed Danger zone, do not proceed ::: +**Also see:** + +- [@vuepress/plugin-container](../plugin/official/plugin-container.md) + ## Syntax Highlighting in Code Blocks VuePress uses [Prism](https://prismjs.com/) to highlight language syntax in markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block: @@ -291,7 +295,7 @@ module.exports = { } -## Import Code Snippets +## Import Code Snippets You can import code snippets from existing files via following syntax: @@ -316,7 +320,7 @@ It also supports [line highlighting](#line-highlighting-in-code-blocks): <<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2} ::: tip - Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of `@` is `process.cwd()`. +Since the import of the code snippets will be executed before webpack compilation, you can't use the path alias in webpack. The default value of `@` is `process.cwd()`. ::: diff --git a/packages/docs/docs/zh/guide/markdown.md b/packages/docs/docs/zh/guide/markdown.md index 11ae8f01b3..68307ace16 100644 --- a/packages/docs/docs/zh/guide/markdown.md +++ b/packages/docs/docs/zh/guide/markdown.md @@ -69,7 +69,7 @@ lang: en-US ## GitHub 风格的表格 -**Input** +**输入** ``` | Tables | Are | Cool | @@ -79,7 +79,7 @@ lang: en-US | zebra stripes | are neat | $1 | ``` -**Output** +**输出** | Tables | Are | Cool | | ------------- |:-------------:| -----:| @@ -89,19 +89,19 @@ lang: en-US ## Emoji -**Input** +**输入** ``` :tada: :100: ``` -**Output** +**输出** :tada: :100: ## 目录 -**Input** +**输入** ```md [[toc]] @@ -113,15 +113,15 @@ lang: en-US ``` -**Output** +**输出** [[toc]] 目录(Table of Contents)的渲染可以通过 [`markdown.toc`](../config/README.md#markdown-toc) 选项来配置,也可以在 [TOC 组件](./using-vue.md#toc)中直接传入,如 ``。 -## 自定义容器 +## 自定义容器 -**Input** +**输入** ``` ::: tip @@ -137,7 +137,7 @@ This is a dangerous warning ::: ``` -**Output** +**输出** ::: tip This is a tip @@ -163,11 +163,15 @@ Danger zone, do not proceed Danger zone, do not proceed ::: +**参考:** + +- [@vuepress/plugin-container](../plugin/official/plugin-container.md) + ## 代码块中的语法高亮 VuePress 使用了 [Prism](https://prismjs.com/) 来为 markdown 中的代码块实现语法高亮。Prism 支持大量的编程语言,你需要做的只是在代码块的开始倒勾中附加一个有效的语言别名: -**Input** +**输入** ```` ``` js @@ -178,7 +182,7 @@ export default { ``` ```` -**Output** +**输出** ``` js export default { @@ -187,7 +191,7 @@ export default { } ``` -**Input** +**输入** ```` ``` html @@ -202,7 +206,7 @@ export default { ``` ```` -**Output** +**输出** ``` html
    @@ -220,7 +224,7 @@ export default { ## 代码块中的行高亮 -**Input** +**输入** ```` ``` js {4} @@ -234,7 +238,7 @@ export default { ``` ```` -**Output** +**输出** ``` js{4} export default { @@ -290,7 +294,7 @@ module.exports = { } -## 导入代码段 +## 导入代码段 你可以通过下述的语法导入已经存在的文件中的代码段: @@ -304,18 +308,18 @@ module.exports = { <<< @/filepath{highlightLines} ``` -**Input** +**输入** ``` <<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2} ``` -**Output** +**输出** <<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2} ::: tip 注意 - 由于代码段的导入将在 webpack 编译之前执行,因此你无法使用 webpack 中的路径别名,此处的 `@` 默认值是 `process.cwd()`。 +由于代码段的导入将在 webpack 编译之前执行,因此你无法使用 webpack 中的路径别名,此处的 `@` 默认值是 `process.cwd()`。 ::: ## 进阶配置