feat: add custom YAML tag code block extension

src/markdown/code-block-yaml-tag.ts

@@ -0,0 +1,62 @@
+import type { MarkedExtension } from "marked";
+import yaml from "js-yaml";
+
+export default function markedCodeBlockYamlTag(): MarkedExtension {
+  return {
+    extensions: [
+      {
+        name: "code-block-yaml-tag",
+        level: "block",
+        start(src: string) {
+          return src.match(/^```yaml\/tag\s*\n/m)?.index;
+        },
+        tokenizer(src: string) {
+          const rule = /^```yaml\/tag\s*\n([\s\S]*?)\n```/;
+          const match = rule.exec(src);
+          if (match) {
+            const yamlContent = match[1]?.trim() || "";
+            let props: Record<string, unknown> = {};
+            try {
+              props =
+                (yaml.load(yamlContent) as Record<string, unknown>) || {};
+            } catch (e) {
+              console.error("YAML Parse Error in code-block-yaml-tag:", e);
+              props = { error: "Invalid YAML content" };
+            }
+
+            const tagName = (props.tag as string) || "tag-unknown";
+            const { tag, ...rest } = props;
+
+            let content = "";
+            if ("body" in rest) {
+              content = String(rest.body || "");
+              delete (rest as Record<string, unknown>).body;
+            }
+
+            const propsStr = Object.entries(rest)
+              .map(([key, value]) => {
+                const strValue = String(value);
+                if (strValue.includes(" ") || strValue.includes('"')) {
+                  return `${key}="${strValue.replace(/"/g, "&quot;")}"`;
+                }
+                return `${key}="${strValue}"`;
+              })
+              .join(" ");
+
+            return {
+              type: "code-block-yaml-tag",
+              raw: match[0],
+              tagName,
+              props: propsStr,
+              content,
+            };
+          }
+        },
+        renderer(token: any) {
+          const propsAttr = token.props ? ` ${token.props}` : "";
+          return `<${token.tagName}${propsAttr}>${token.content || ""}</${token.tagName}>\n`;
+        },
+      },
+    ],
+  };
+}

src/markdown/index.ts

@@ -1,11 +1,11 @@
-import { Marked, type MarkedExtension } from 'marked';
+import { Marked, type MarkedExtension } from "marked";
-import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
+import { createDirectives, presetDirectiveConfigs } from "marked-directive";
-import yaml from 'js-yaml';
 import markedAlert from "marked-alert";
 import markedMermaid from "./mermaid";
 import markedTable from "./table";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 import markedColumns from "./columns";
+import markedCodeBlockYamlTag from "./code-block-yaml-tag";
 
 let globalIconPrefix: string | undefined = undefined;
 function overrideIconPrefix(path?: string) {
@@ -13,8 +13,8 @@ function overrideIconPrefix(path?: string){
   return {
     [Symbol.dispose]() {
       globalIconPrefix = undefined;
-        }
+    },
-    }
+  };
 }
 
 // 使用 marked-directive 来支持指令语法
@@ -23,36 +23,47 @@ const marked = new Marked()
   .use(markedAlert())
   .use(markedMermaid())
   .use(markedTable())
-    .use(createDirectives([
+  .use(markedCodeBlockYamlTag())
+  .use(
+    createDirectives([
       ...presetDirectiveConfigs,
       {
-        marker: '::::',
+        marker: "::::",
-        level: 'container'
+        level: "container",
       },
       {
-        marker: ':::::',
+        marker: ":::::",
-        level: 'container'
+        level: "container",
       },
       {
-        level: 'inline',
+        level: "inline",
-        marker: ':',
+        marker: ":",
         // :[icon] 或 :[icon.ext] 语法
         // 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
         // 如果不指定扩展名，默认为 .png
         renderer(token) {
           if (!token.meta.name) {
-                const iconText = token.text || '';
+            const iconText = token.text || "";
 
             // 已知支持的图片扩展名
-                const supportedExtensions = ['svg', 'png', 'gif', 'jpg', 'jpeg', 'webp'];
+            const supportedExtensions = [
+              "svg",
+              "png",
+              "gif",
+              "jpg",
+              "jpeg",
+              "webp",
+            ];
 
             // 检查是否包含扩展名（查找最后一个点）
             let iconName = iconText;
-                let extension = 'png'; // 默认扩展名
+            let extension = "png"; // 默认扩展名
 
-                const lastDotIndex = iconName.lastIndexOf('.');
+            const lastDotIndex = iconName.lastIndexOf(".");
             if (lastDotIndex > 0) {
-                    const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
+              const potentialExt = iconName
+                .slice(lastDotIndex + 1)
+                .toLowerCase();
               if (supportedExtensions.includes(potentialExt)) {
                 extension = potentialExt;
                 iconName = iconName.slice(0, lastDotIndex);
@@ -60,85 +71,29 @@ const marked = new Marked()
             }
 
             const label = token.attrs?.label as string | undefined;
-                const inner = label ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>` : "";
+            const inner = label
-                const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
+              ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>`
+              : "";
+            const style = globalIconPrefix
+              ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"`
+              : "";
             const iconHtml = `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}">${inner}</icon>`;
 
-                const repeat = parseInt(`${token.attrs?.repeat || ''}`);
+            const repeat = parseInt(`${token.attrs?.repeat || ""}`);
-                const join = token.attrs?.join || '';
+            const join = token.attrs?.join || "";
-                const separator = join ? `<${join}></${join}>` : '';
+            const separator = join ? `<${join}></${join}>` : "";
             if (isNaN(repeat) || repeat < 1) return iconHtml;
 
             return Array(repeat).fill(iconHtml).join(separator);
           }
           return false;
-        }
         },
-]), {
+      },
-    extensions: [
+    ]),
-        ...markedColumns(),
     {
-    // 自定义代码块渲染器，支持 yaml/tag 格式
+      extensions: [...markedColumns()],
-        name: 'code-block-yaml-tag',
-        level: 'block',
-        start(src: string) {
-            // 检测 ```yaml/tag 开头的代码块
-            return src.match(/^```yaml\/tag\s*\n/m)?.index;
     },
-        tokenizer(src: string) {
+  );
-            const rule = /^```yaml\/tag\s*\n([\s\S]*?)\n```/;
-            const match = rule.exec(src);
-            if (match) {
-                const yamlContent = match[1]?.trim() || '';
-                let props: Record<string, unknown> = {};
-                try {
-                    props = (yaml.load(yamlContent) as Record<string, unknown>) || {};
-                } catch (e) {
-                    console.error("YAML Parse Error in code-block-yaml-tag:", e);
-                    props = { error: "Invalid YAML content" };
-                }
-
-                // 提取 tag 名称，默认为 tag-unknown
-                const tagName = (props.tag as string) || 'tag-unknown';
-
-                // 移除 tag 属性，剩下的作为 HTML 属性
-                const { tag, ...rest } = props;
-
-                // 提取 innerText 内容（如果有 body 字段）
-                let content = '';
-                if ('body' in rest) {
-                    content = String(rest.body || '');
-                    delete (rest as Record<string, unknown>).body;
-                }
-
-                // 构建属性字符串
-                const propsStr = Object.entries(rest)
-                    .map(([key, value]) => {
-                        const strValue = String(value);
-                        // 如果值包含空格或特殊字符，添加引号
-                        if (strValue.includes(' ') || strValue.includes('"')) {
-                            return `${key}="${strValue.replace(/"/g, '&quot;')}"`;
-                        }
-                        return `${key}="${strValue}"`;
-                    })
-                    .join(' ');
-
-                return {
-                    type: 'code-block-yaml-tag',
-                    raw: match[0],
-                    tagName,
-                    props: propsStr,
-                    content
-                };
-            }
-        },
-        renderer(token: any) {
-            // 渲染为自定义 HTML 标签
-            const propsAttr = token.props ? ` ${token.props}` : '';
-            return `<${token.tagName}${propsAttr}>${token.content || ''}</${token.tagName}>\n`;
-        }
-    }]
-});
 
 export function parseMarkdown(content: string, iconPrefix?: string): string {
   using prefix = overrideIconPrefix(iconPrefix);