feat(md): allow customizing container titles globally (#3044)

src/node/markdown/markdown.ts

@@ -20,7 +20,7 @@ import attrsPlugin from 'markdown-it-attrs'
 import emojiPlugin from 'markdown-it-emoji'
 import type { ILanguageRegistration, IThemeRegistration } from 'shiki'
 import type { Logger } from 'vite'
-import { containerPlugin } from './plugins/containers'
+import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { highlight } from './plugins/highlight'
 import { highlightLinePlugin } from './plugins/highlightLines'
 import { imagePlugin } from './plugins/image'
@@ -57,6 +57,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
   cache?: boolean
   component?: ComponentPluginOptions
   math?: boolean | any
+  container?: ContainerOptions
 }
 
 export type MarkdownRenderer = MarkdownIt
@@ -95,7 +96,7 @@ export const createMarkdownRenderer = async (
     .use(highlightLinePlugin)
     .use(preWrapperPlugin, { hasSingleTheme })
     .use(snippetPlugin, srcDir)
-    .use(containerPlugin, { hasSingleTheme })
+    .use(containerPlugin, { hasSingleTheme }, options.container)
     .use(imagePlugin)
     .use(
       linkPlugin,

src/node/markdown/plugins/containers.ts

@@ -9,12 +9,34 @@ import {
   type Options
 } from './preWrapper'
 
-export const containerPlugin = (md: MarkdownIt, options: Options) => {
-  md.use(...createContainer('tip', 'TIP', md))
-    .use(...createContainer('info', 'INFO', md))
-    .use(...createContainer('warning', 'WARNING', md))
-    .use(...createContainer('danger', 'DANGER', md))
-    .use(...createContainer('details', 'Details', md))
+export const containerPlugin = (
+  md: MarkdownIt,
+  options: Options,
+  containerOptions?: ContainerOptions
+) => {
+  md.use(...createContainer('tip', containerOptions?.tipLabel || 'TIP', md))
+    .use(...createContainer('info', containerOptions?.infoLabel || 'INFO', md))
+    .use(
+      ...createContainer(
+        'warning',
+        containerOptions?.warningLabel || 'WARNING',
+        md
+      )
+    )
+    .use(
+      ...createContainer(
+        'danger',
+        containerOptions?.dangerLabel || 'DANGER',
+        md
+      )
+    )
+    .use(
+      ...createContainer(
+        'details',
+        containerOptions?.detailsLabel || 'Details',
+        md
+      )
+    )
     // explicitly escape Vue syntax
     .use(container, 'v-pre', {
       render: (tokens: Token[], idx: number) =>
@@ -104,3 +126,11 @@ function createCodeGroup(options: Options): ContainerArgs {
     }
   ]
 }
+
+export interface ContainerOptions {
+  infoLabel?: string
+  tipLabel?: string
+  warningLabel?: string
+  dangerLabel?: string
+  detailsLabel?: string
+}