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()`。
:::
## 进阶配置