feat: allow custom markdown-it container block, close #555

YunYouJun · YunYouJun · commit 78c09511bf95 · 2025-06-29T21:27:21.000+08:00
diff --git a/demo/yun/.valaxy/typed-router.d.ts b/demo/yun/.valaxy/typed-router.d.ts
@@ -52,6 +52,8 @@ declare module 'vue-router/auto-routes' {
     '/notes/': RouteRecordInfo<'/notes/', '/notes', Record<never, never>, Record<never, never>>,
     '/page/[page]': RouteRecordInfo<'/page/[page]', '/page/:page', { page: ParamValue<true> }, { page: ParamValue<false> }>,
     '/posts/': RouteRecordInfo<'/posts/', '/posts', Record<never, never>, Record<never, never>>,
+    '/posts/中文分类': RouteRecordInfo<'/posts/中文分类', '/posts/中文分类', Record<never, never>, Record<never, never>>,
+    '/posts/中文Post测试': RouteRecordInfo<'/posts/中文Post测试', '/posts/中文Post测试', Record<never, never>, Record<never, never>>,
     '/posts/abbrlink': RouteRecordInfo<'/posts/abbrlink', '/posts/abbrlink', Record<never, never>, Record<never, never>>,
     '/posts/about': RouteRecordInfo<'/posts/about', '/posts/about', Record<never, never>, Record<never, never>>,
     '/posts/aplayer': RouteRecordInfo<'/posts/aplayer', '/posts/aplayer', Record<never, never>, Record<never, never>>,
@@ -87,11 +89,10 @@ declare module 'vue-router/auto-routes' {
     '/posts/test-images': RouteRecordInfo<'/posts/test-images', '/posts/test-images', Record<never, never>, Record<never, never>>,
     '/posts/test-tags': RouteRecordInfo<'/posts/test-tags', '/posts/test-tags', Record<never, never>, Record<never, never>>,
     '/posts/type-link-jump': RouteRecordInfo<'/posts/type-link-jump', '/posts/type-link-jump', Record<never, never>, Record<never, never>>,
-    '/posts/中文Post测试': RouteRecordInfo<'/posts/中文Post测试', '/posts/中文Post测试', Record<never, never>, Record<never, never>>,
-    '/posts/中文分类': RouteRecordInfo<'/posts/中文分类', '/posts/中文分类', Record<never, never>, Record<never, never>>,
     '/projects/': RouteRecordInfo<'/projects/', '/projects', Record<never, never>, Record<never, never>>,
     '/sponsors/': RouteRecordInfo<'/sponsors/', '/sponsors', Record<never, never>, Record<never, never>>,
     '/tags/': RouteRecordInfo<'/tags/', '/tags', Record<never, never>, Record<never, never>>,
+    '/test/custom-blocks': RouteRecordInfo<'/test/custom-blocks', '/test/custom-blocks', Record<never, never>, Record<never, never>>,
     '/test/deadlinks': RouteRecordInfo<'/test/deadlinks', '/test/deadlinks', Record<never, never>, Record<never, never>>,
     '/test/define-basic-loader': RouteRecordInfo<'/test/define-basic-loader', '/test/define-basic-loader', Record<never, never>, Record<never, never>>,
     '/test/footnotes': RouteRecordInfo<'/test/footnotes', '/test/footnotes', Record<never, never>, Record<never, never>>,
diff --git a/demo/yun/pages/test/custom-blocks.md b/demo/yun/pages/test/custom-blocks.md
@@ -0,0 +1,41 @@
+---
+title: Custom Blocks
+---
+
+::: custom
+
+I am custom block.
+
+:::
+
+---
+
+::: tip
+
+tip
+
+:::
+
+::: warning
+
+warning
+
+:::
+
+::: danger
+
+danger
+
+:::
+
+::: info
+
+info
+
+:::
+
+::: details Click to expand
+
+details
+
+:::
diff --git a/demo/yun/valaxy.config.ts b/demo/yun/valaxy.config.ts
@@ -62,6 +62,11 @@ export default defineValaxyConfig<ThemeConfig>({
       info: {
         text: 'información',
       },
+
+      custom: {
+        icon: 'i-ri:info-i',
+        text: 'CUSTOM',
+      },
     },
 
     codeTransformers: [
diff --git a/docs/pages/guide/markdown.md b/docs/pages/guide/markdown.md
@@ -665,6 +665,40 @@ Details Content
 :::
 ```
 
+::: zh-CN
+
+你也可以自定义新的容器名称。
+
+:::
+
+::: en
+
+You can also customize new container names.
+
+:::
+
+```md
+::: custom
+
+I am a custom block.
+
+:::
+```
+
+```ts [valaxy.config.ts]
+import { defineValaxyConfig } from 'valaxy'
+export default defineValaxyConfig({
+  markdown: {
+    blocks: {
+      custom: {
+        icon: 'i-ri:info-i',
+        text: 'CUSTOM',
+      },
+    }
+  }
+})
+```
+
 ## 添加代码块标题与图标 {lang="zh-CN"}
 
 ## Add Code Block Title And Icons {lang="en"}
diff --git a/packages/valaxy/node/plugins/markdown/plugins/markdown-it/container.ts b/packages/valaxy/node/plugins/markdown/plugins/markdown-it/container.ts
@@ -112,14 +112,16 @@ const defaultBlocksOptions: ContainerOptions = {
 }
 
 export function containerPlugin(md: MarkdownIt, options: Options, containerOptions: ContainerOptions = {}) {
-  Object.keys(defaultBlocksOptions).forEach((optionKey) => {
+  const blockKeys = Object.keys(Object.assign(defaultBlocksOptions, containerOptions))
+  blockKeys.forEach((optionKey) => {
     const option: BlockItem = {
       ...defaultBlocksOptions[optionKey as keyof Blocks],
       ...(containerOptions[optionKey as keyof Blocks] || {}),
     }
 
     md.use(...createContainer(optionKey, option))
   })
+
   md.use(...createCodeGroup(options))
 
   const languages = ['zh-CN', 'en']
diff --git a/packages/valaxy/node/plugins/markdown/types.ts b/packages/valaxy/node/plugins/markdown/types.ts
@@ -17,11 +17,11 @@ import type {
   ShikiTransformer,
   ThemeRegistration,
 } from 'shiki'
-import type { PageData } from '../../../types'
 
 // import type { lazyloadOptions } from './plugins/markdown-it/lazyload'
 
-import type { Blocks, ContainerOptions } from './plugins/markdown-it/container'
+import type { PageData } from '../../../types'
+import type { BlockItem, Blocks, ContainerOptions } from './plugins/markdown-it/container'
 
 export type ThemeOptions
   = | ThemeRegistration
@@ -128,7 +128,7 @@ export interface MarkdownOptions extends Options {
   /**
    * Custom block configurations based on `markdown-it-container`
    */
-  blocks?: Blocks
+  blocks?: Record<string, BlockItem> | Blocks
 
   /**
    * @see [markdown-it-image-figures](https://www.npmjs.com/package/markdown-it-image-figures)
