docs(plugin-container): add plugin reference

Author: meteorlxy

docs/reference/plugin/container.md

@@ -1,3 +1,139 @@
 # container
 
-> TODO
+> @vuepress/plugin-container
+
+Register markdown custom containers in your VuePress site.
+
+This plugin simplifies the use of [markdown-it-container](https://github.com/markdown-it/markdown-it-container), but also retains its original capabilities.
+
+The [Custom Containers](../default-theme/markdown.md#custom-containers) of default theme is powered by this plugin.
+
+## Container Syntax
+
+```md
+::: <type> [info]
+[content]
+:::
+```
+
+- The `type` is required and should be specified via [type](#type) option.
+- The `info` is optional, and the default value can be specified via `defaultInfo` in [locales](#locales) option.
+- The `content` can be any valid markdown content.
+
+## Options
+
+### type
+
+- Type: `string`
+
+- Details:
+
+  The type of the container.
+
+  It will be used as the `name` param of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+### locales
+
+- Type: `Record<string, { defaultInfo: string }>`
+
+- Details:
+
+  The default `info` of the container in different locales.
+
+  If this option is not specified, the default `info` will fallback to the uppercase of the [type](#type) option.
+
+- Example:
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/container',
+      {
+        type: 'tip',
+        locales: {
+          '/': {
+            defaultInfo: 'TIP',
+          },
+          '/zh/': {
+            defaultInfo: '提示',
+          },
+        },
+      },
+    ],
+  ],
+}
+```
+
+### before
+
+- Type: `(info: string) => string`
+
+- Default:
+
+```ts
+(info: string): string =>
+  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
+```
+
+- Details:
+
+  A function to render the starting tag of the container.
+
+  The first param is the `info` part of [container syntax](#container-syntax).
+
+  This option will not take effect if you don't specify the [after](#after) option.
+
+### after
+
+- Type: `(info: string) => string`
+
+- Default:
+
+```ts
+(): string => '</div>\n'
+```
+
+- Details:
+
+  A function to render the ending tag of the container.
+
+  The first param is the `info` part of [container syntax](#container-syntax).
+
+  This option will not take effect if you don't specify the [before](#before) option.
+
+### render
+
+- Type:
+
+```ts
+type MarkdownItContainerRenderFunction = (
+  tokens: Token[],
+  index: number,
+  options: any,
+  env: MarkdownEnv,
+  self: Renderer
+) => string
+```
+
+- Details:
+
+  The `render` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+  This plugin uses a default `render` function. If you specify this option, the default `render` function will be replaced, and the [locales](#locales), [before](#before) and [after](#after) options will be ignored.
+
+### validate
+
+- Type: `(params: string) => boolean`
+
+- Details:
+
+  The `validate` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+### marker
+
+- Type: `string`
+
+- Details:
+
+  The `marker` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).

docs/zh/reference/plugin/container.md

@@ -1,3 +1,139 @@
 # container
 
-> TODO
+> @vuepress/plugin-container
+
+为你的 VuePress 站点注册自定义容器。
+
+该插件简化了 [markdown-it-container](https://github.com/markdown-it/markdown-it-container) 的使用方法，但同时也保留了其原本的能力。
+
+默认主题的 [自定义容器](../default-theme/markdown.md#自定义容器) 就是由该插件支持的。
+
+## 容器语法
+
+```md
+::: <type> [info]
+[content]
+:::
+```
+
+- `type` 是必需的，应通过 [type](#type) 配置项来指定。
+- `info` 是可选的，其默认值可以通过 [locales](#locales) 的 `defaultInfo` 配置项来指定。
+- `content` 可是任何合法的 Markdown 内容。
+
+## 配置项
+
+### type
+
+- 类型： `string`
+
+- 详情：
+
+  容器的类型。
+
+  它将会被用作 [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `name` 参数。
+
+### locales
+
+- 类型： `Record<string, { defaultInfo: string }>`
+
+- 详情：
+
+  容器在不同 locales 下的默认 `info` 。
+
+  如果没有指定该配置项，默认 `info` 会使用大写的 [type](#type) 。
+
+- 示例：
+
+```js
+module.exports = {
+  plugins: [
+    [
+      '@vuepress/container',
+      {
+        type: 'tip',
+        locales: {
+          '/': {
+            defaultInfo: 'TIP',
+          },
+          '/zh/': {
+            defaultInfo: '提示',
+          },
+        },
+      },
+    ],
+  ],
+}
+```
+
+### before
+
+- 类型： `(info: string) => string`
+
+- 默认值：
+
+```ts
+(info: string): string =>
+  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
+```
+
+- 详情：
+
+  一个用于渲染容器起始标签的函数。
+
+  第一个参数是 [容器语法](#容器语法) 的 `info` 部分。
+
+  如果你没有设置 [after](#after) 配置项，则该配置项也不会生效。
+
+### after
+
+- 类型： `(info: string) => string`
+
+- 默认值：
+
+```ts
+(): string => '</div>\n'
+```
+
+- 详情：
+
+  一个用于渲染容器结束标签的函数。
+
+  第一个参数是 [容器语法](#容器语法) 的 `info` 部分。
+
+  如果你没有设置 [before](#before) 配置项，则该配置项也不会生效。
+
+### render
+
+- 类型：
+
+```ts
+type MarkdownItContainerRenderFunction = (
+  tokens: Token[],
+  index: number,
+  options: any,
+  env: MarkdownEnv,
+  self: Renderer
+) => string
+```
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `render` 配置项。
+
+  该插件使用了一个默认的 `render` 函数。但如果你指定了该配置项，那么默认的 `render` 函数就会被替换掉，此时 [locales](#locales) 、 [before](#before) 和 [after](#after) 配置项都会被忽略。
+
+### validate
+
+- 类型： `(params: string) => boolean`
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `validate` 配置项。
+
+### marker
+
+- 类型： `string`
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `marker` 配置项。