VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • 幻灯片演示
    • 幻灯片主题
  • shiki

markdown-container

@vuepress/plugin-markdown-container

为你的 VuePress 站点注册自定义容器。

该插件简化了 markdown-it-container 的使用方法,但同时也保留了其原本的能力。

默认主题的 自定义容器 就是由该插件支持的。

使用方法

npm i -D @vuepress/plugin-markdown-container@next
.vuepress/config.ts
import { markdownContainerPlugin } from '@vuepress/plugin-markdown-container'

export default {
  plugins: [
    markdownContainerPlugin({
      // 配置项
    }),
  ],
}

容器语法

::: <type> [info]
[content]
:::
  • type 是必需的,应通过 type 配置项来指定。
  • info 是可选的,其默认值可以通过 locales 的 defaultInfo 配置项来指定。
  • content 可是任何合法的 Markdown 内容。

提示

该插件可以被多次使用,以便支持不同类型的容器。

配置项

type

  • 类型: string

  • 详情:

    容器的类型。

    它将会被用作 markdown-it-container 的 name 参数。

locales

  • 类型: Record<string, { defaultInfo: string }>

  • 详情:

    容器在不同 locales 下的默认 info 。

    如果没有指定该配置项,默认 info 会使用大写的 type 。

  • 示例:

.vuepress/config.ts
export default {
  plugins: [
    markdownContainerPlugin({
      type: 'tip',
      locales: {
        '/': {
          defaultInfo: 'TIP',
        },
        '/zh/': {
          defaultInfo: '提示',
        },
      },
    }),
  ],
}
  • 参考:
    • 指南 > 多语言支持

before

  • 类型: (info: string) => string

  • 默认值:

(info: string): string =>
  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
  • 详情:

    一个用于渲染容器起始标签的函数。

    第一个参数是 容器语法 的 info 部分。

    如果你没有设置 after 配置项,则该配置项也不会生效。

after

  • 类型: (info: string) => string

  • 默认值:

(): string => '</div>\n'
  • 详情:

    一个用于渲染容器结束标签的函数。

    第一个参数是 容器语法 的 info 部分。

    如果你没有设置 before 配置项,则该配置项也不会生效。

render

  • 类型:
type MarkdownItContainerRenderFunction = (
  tokens: Token[],
  index: number,
  options: unknown,
  env: MarkdownEnv,
  self: Renderer,
) => string
  • 详情:

    markdown-it-container 的 render 配置项。

    该插件使用了一个默认的 render 函数。但如果你指定了该配置项,那么默认的 render 函数就会被替换掉,此时 locales 、 before 和 after 配置项都会被忽略。

validate

  • 类型: (params: string) => boolean

  • 详情:

    markdown-it-container 的 validate 配置项。

marker

  • 类型: string

  • 详情:

    markdown-it-container 的 marker 配置项。

在 GitHub 上编辑此页
上次更新: 2025/4/12 19:03
贡献者: Mister-Hope, 张怀文, meteorlxy, pengzhanbo
上一页
append-date
下一页
markdown-ext