fix: include custom code block icons when building, close #573 (#576)

* fix: include custom code block icons when building, close #573

* docs: add how to use customize code block icon

demo/yun/pages/posts/code.md

@@ -6,7 +6,7 @@ categories:
   - $locale:category.test
 ---
 
-```dockerfile
+```dockerfile [Sample.dockerfile]
 FROM ubuntu
 
 ENV PATH /opt/conda/bin:$PATH

demo/yun/valaxy.config.ts

@@ -121,6 +121,7 @@ export default defineValaxyConfig<ThemeConfig>({
     customIcon: {
       // valaxy: 'https://valaxy.site/favicon.svg',
       valaxy: localIconLoader(import.meta.url, '../../docs/public/favicon.svg'),
+      dockerfile: 'vscode-icons:file-type-docker',
     },
   },
 })

docs/pages/guide/markdown.md

@@ -720,6 +720,7 @@ export default defineValaxyConfig({
       playwright: 'vscode-icons:file-type-playwright',
       typedoc: 'vscode-icons:file-type-typedoc',
       eslint: 'vscode-icons:file-type-eslint',
+      dockerfile: 'vscode-icons:file-type-docker',
     },
   }
 })
@@ -733,6 +734,11 @@ import { defineValaxyConfig } from 'valaxy'
 
 export default defineValaxyConfig({}) 
 ```
+```dockerfile [sample.dockerfile]
+FROM ubuntu
+
+ENV PATH /opt/conda/bin:$PATH
+```
 ````
 
 我们将会得到带有 `valaxy.config.ts` 标题与 Valaxy 图标的代码块：
@@ -743,6 +749,14 @@ import { defineValaxyConfig } from 'valaxy'
 export default defineValaxyConfig({})
 ```
 
+还会得到带有 `sample.dockerfile` 标题与 Docker 图标的代码块：
+
+```dockerfile [sample.dockerfile]
+FROM ubuntu
+
+ENV PATH /opt/conda/bin:$PATH
+```
+
 ## KaTeX {lang="en"}
 
 ## KaTeX 语法支持 {lang="zh-CN"}

packages/valaxy/node/plugins/markdown/plugins/markdown-it/titleCollector.ts

@@ -0,0 +1,43 @@
+import type MarkdownIt from 'markdown-it'
+import { extractTitle } from './preWrapper'
+
+// Global title collector
+const globalTitleCollector = new Set<string>()
+
+/**
+ * Get the global title collector
+ */
+export function getGlobalTitleCollector(): Set<string> {
+  return globalTitleCollector
+}
+
+/**
+ * Clear the global title collector
+ */
+export function clearGlobalTitleCollector(): void {
+  globalTitleCollector.clear()
+}
+
+/**
+ * Markdown-it plugin to collect code block titles during processing
+ * This plugin should be added before preWrapperPlugin to capture titles
+ */
+export function titleCollectorPlugin(md: MarkdownIt) {
+  const fence = md.renderer.rules.fence!
+
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+
+    // Extract title from token.info before it gets modified by other plugins
+    const title = extractTitle(token.info)
+
+    // Only collect actual titles (not language fallbacks)
+    if (title && title !== extractTitle('')) {
+      globalTitleCollector.add(title)
+    }
+
+    // Call the original fence renderer
+    return fence(...args)
+  }
+}

packages/valaxy/node/plugins/markdown/setup.ts

@@ -39,6 +39,7 @@ import Katex from './plugins/markdown-it/katex'
 import { lineNumberPlugin } from './plugins/markdown-it/lineNumbers'
 import { preWrapperPlugin } from './plugins/markdown-it/preWrapper'
 import { snippetPlugin } from './plugins/markdown-it/snippet'
+import { titleCollectorPlugin } from './plugins/markdown-it/titleCollector'
 
 export const defaultCodeTheme = { light: 'github-light', dark: 'github-dark' } as const as ThemeOptions
 
@@ -57,6 +58,7 @@ export async function setupMarkdownPlugins(
 
   // custom plugins
   md.use(highlightLinePlugin)
+    .use(titleCollectorPlugin)
     .use(preWrapperPlugin, { theme, siteConfig })
     .use(snippetPlugin, options?.userRoot)
     .use(containerPlugin, {

packages/valaxy/node/plugins/preset.ts

@@ -15,6 +15,8 @@ import { groupIconVitePlugin } from 'vitepress-plugin-group-icons'
 import { customElements } from '../constants'
 import { createConfigPlugin } from './extendConfig'
 import { createMarkdownPlugin } from './markdown'
+import { getGlobalTitleCollector } from './markdown/plugins/markdown-it/titleCollector'
+
 import { createFixPlugins } from './patchTransform'
 import { createClientSetupPlugin } from './setupClient'
 import { createUnocssPlugin } from './unocss'
@@ -153,12 +155,16 @@ export async function ViteValaxyPlugins(
     }
   }
 
+  // Get code block titles collected during markdown processing (no file I/O needed)
+  const codeBlockTitles = getGlobalTitleCollector()
+
   const builtinCustomIcon = {
     nodejs: 'vscode-icons:file-type-node',
     playwright: 'vscode-icons:file-type-playwright',
     typedoc: 'vscode-icons:file-type-typedoc',
     eslint: 'vscode-icons:file-type-eslint',
   }
+
   plugins.push(
     groupIconVitePlugin({
       customIcon: {
@@ -169,6 +175,7 @@ export async function ViteValaxyPlugins(
         ...valaxyConfig.groupIcons?.defaultLabels || [],
         ...Object.keys(builtinCustomIcon),
         ...Object.keys(valaxyConfig.groupIcons?.customIcon || {}),
+        ...Array.from(codeBlockTitles),
       ],
     }),
   )