md2x 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -53070,10 +53070,10 @@ var init_lib4 = __esm({
        * @returns {undefined}
        *   Nothing.
        */
-      set basename(basename) {
-        assertNonEmpty(basename, "basename");
-        assertPart(basename, "basename");
-        this.path = default2.join(this.dirname || "", basename);
+      set basename(basename2) {
+        assertNonEmpty(basename2, "basename");
+        assertPart(basename2, "basename");
+        this.path = default2.join(this.dirname || "", basename2);
       }
       /**
        * Get the parent path (example: `'~'`).
@@ -53119,18 +53119,18 @@ var init_lib4 = __esm({
        * @returns {undefined}
        *   Nothing.
        */
-      set extname(extname) {
-        assertPart(extname, "extname");
+      set extname(extname2) {
+        assertPart(extname2, "extname");
         assertPath(this.dirname, "extname");
-        if (extname) {
-          if (extname.codePointAt(0) !== 46) {
+        if (extname2) {
+          if (extname2.codePointAt(0) !== 46) {
             throw new Error("`extname` must start with `.`");
           }
-          if (extname.includes(".", 1)) {
+          if (extname2.includes(".", 1)) {
             throw new Error("`extname` cannot contain multiple dots");
           }
         }
-        this.path = default2.join(this.dirname, this.stem + (extname || ""));
+        this.path = default2.join(this.dirname, this.stem + (extname2 || ""));
       }
       /**
        * Get the full path (example: `'~/index.min.js'`).
@@ -127486,6 +127486,7 @@ var init_theme_to_css = __esm({
 var node_exporter_exports = {};
 __export(node_exporter_exports, {
   NodeDocxExporter: () => NodeDocxExporter,
+  NodeHtmlExporter: () => NodeHtmlExporter,
   NodePdfExporter: () => NodePdfExporter,
   default: () => node_exporter_default
 });
@@ -127524,6 +127525,94 @@ function createPluginRenderer(browserRenderer, basePath, themeConfig) {
     }
   };
 }
+function escapeHtmlText(text9) {
+  return String(text9).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function decodeHtmlEntities3(text9) {
+  return text9.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#x3C;/gi, "<").replace(/&#x3E;/gi, ">").replace(/&#x26;/gi, "&").replace(/&#60;/g, "<").replace(/&#62;/g, ">").replace(/&#38;/g, "&");
+}
+async function processDiagrams(html7, browserRenderer, basePath, themeConfig, mode) {
+  if (mode !== "img") return html7;
+  if (!browserRenderer) return html7;
+  const pluginLangs = plugins.filter((p3) => p3.nodeSelector.includes("code")).map((p3) => p3.language).filter((lang) => lang !== null);
+  const aliases = ["graphviz", "gv", "vegalite"];
+  const supportedLangs = [...pluginLangs, ...aliases].join("|");
+  if (!supportedLangs) return html7;
+  const codeBlockRegex = new RegExp(
+    `<pre><code class="(?:hljs )?language-(${supportedLangs})">([\\s\\S]*?)<\\/code><\\/pre>`,
+    "gi"
+  );
+  const matches = [...html7.matchAll(codeBlockRegex)];
+  for (const match of matches) {
+    const [fullMatch, lang, code4] = match;
+    const decodedCode = decodeHtmlEntities3(code4);
+    let renderType = lang.toLowerCase();
+    if (renderType === "graphviz" || renderType === "gv") renderType = "dot";
+    if (renderType === "vegalite") renderType = "vega-lite";
+    try {
+      const result = await browserRenderer.render(renderType, decodedCode, basePath, themeConfig);
+      if (result && result.base64) {
+        const imgTag = `<div class="md2x-diagram"><img class="md2x-diagram" src="data:image/${result.format};base64,${result.base64}" alt="${escapeHtmlText(
+          `${lang} diagram`
+        )}" style="max-width: 100%;" /></div>`;
+        html7 = html7.replace(fullMatch, imgTag);
+      }
+    } catch (e) {
+      console.warn(`Failed to render ${lang} diagram:`, e);
+    }
+  }
+  return html7;
+}
+async function markdownToHtmlFragment(markdown2, browserRenderer, basePath, themeConfig, diagramMode) {
+  const { unified: unified2 } = await Promise.resolve().then(() => (init_unified(), unified_exports));
+  const remarkParse2 = (await Promise.resolve().then(() => (init_remark_parse(), remark_parse_exports))).default;
+  const remarkGfm2 = (await Promise.resolve().then(() => (init_remark_gfm(), remark_gfm_exports))).default;
+  const remarkMath2 = (await Promise.resolve().then(() => (init_remark_math(), remark_math_exports))).default;
+  const remarkSuperSub2 = (await Promise.resolve().then(() => (init_remark_super_sub(), remark_super_sub_exports))).default;
+  const remarkRehype2 = (await Promise.resolve().then(() => (init_remark_rehype(), remark_rehype_exports))).default;
+  const rehypeKatex2 = (await Promise.resolve().then(() => (init_rehype_katex(), rehype_katex_exports))).default;
+  const rehypeHighlight2 = (await Promise.resolve().then(() => (init_rehype_highlight(), rehype_highlight_exports))).default;
+  const rehypeStringify2 = (await Promise.resolve().then(() => (init_rehype_stringify(), rehype_stringify_exports))).default;
+  const { visit: visit2 } = await Promise.resolve().then(() => (init_unist_util_visit(), unist_util_visit_exports));
+  function rehypeBlockImages() {
+    return (tree) => {
+      visit2(tree, "element", (node2) => {
+        if (node2.tagName !== "p") return;
+        const children = node2.children || [];
+        if (children.length === 0) return;
+        let imageCount = 0;
+        let imageIndex = -1;
+        let hasSubstantialTextAfterImage = false;
+        let foundImage = false;
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (child.type === "element" && child.tagName === "img") {
+            imageCount++;
+            imageIndex = i;
+            foundImage = true;
+          } else if (foundImage) {
+            if (child.type === "text" && child.value.trim() !== "") {
+              hasSubstantialTextAfterImage = true;
+            } else if (child.type === "element" && child.tagName !== "br") {
+              hasSubstantialTextAfterImage = true;
+            }
+          }
+        }
+        if (imageCount === 1 && !hasSubstantialTextAfterImage && imageIndex >= 0) {
+          const img = children[imageIndex];
+          img.properties = img.properties || {};
+          const existingClass = img.properties.className || [];
+          img.properties.className = Array.isArray(existingClass) ? [...existingClass, "block-image"] : [existingClass, "block-image"];
+        }
+      });
+    };
+  }
+  const processor = unified2().use(remarkParse2).use(remarkGfm2, { singleTilde: false }).use(remarkMath2).use(remarkSuperSub2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
+  const file = await processor.process(markdown2);
+  let html7 = String(file);
+  html7 = await processDiagrams(html7, browserRenderer, basePath, themeConfig, diagramMode);
+  return html7;
+}
 async function loadThemeCss(themeId) {
   const platform = globalThis.platform;
   const themeManager2 = (await Promise.resolve().then(() => (init_theme_manager(), theme_manager_exports))).default;
@@ -127725,6 +127814,31 @@ img {
   page-break-inside: avoid;
 }
 
+.md2x-diagram .md2x-diagram-inner {
+  display: inline-block;
+  max-width: 100%;
+  text-align: left;
+}
+
+.md2x-diagram .md2x-diagram-mount {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.md2x-diagram .vega-embed {
+  display: inline-block;
+  max-width: 100%;
+  width: auto !important;
+}
+
+.md2x-diagram .md2x-diagram-inner svg,
+.md2x-diagram .md2x-diagram-inner > svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
 .md2x-diagram img,
 img.md2x-diagram {
   display: block;
@@ -127877,7 +127991,7 @@ function loadKatexCss() {
   css2 = css2.replace(/url\((['"]?)(?:\.\/)?fonts\//g, `url($1${katexFontsHref}`);
   return css2;
 }
-var NodeDocxExporter, NodePdfExporter, node_exporter_default;
+var NodeDocxExporter, NodePdfExporter, NodeHtmlExporter, node_exporter_default;
 var init_node_exporter = __esm({
   "src/host/node-exporter.ts"() {
     "use strict";
@@ -128002,7 +128116,7 @@ var init_node_exporter = __esm({
           }
           await browserRenderer.initialize();
           const themeConfig = await loadRendererThemeConfig(themeId);
-          const html7 = await this.processMarkdownToHtml(markdown2, browserRenderer, basePath, themeConfig);
+          const html7 = await markdownToHtmlFragment(markdown2, browserRenderer, basePath, themeConfig, "img");
           let katexCss = "";
           try {
             katexCss = loadKatexCss();
@@ -128045,94 +128159,426 @@ var init_node_exporter = __esm({
         }
         fs3.writeFileSync(outputPath, buffer2);
       }
+    };
+    NodeHtmlExporter = class {
       /**
-       * Process markdown to HTML with diagram rendering
+       * Export markdown to standalone HTML string (default) or HTML fragment.
        */
-      async processMarkdownToHtml(markdown2, browserRenderer, basePath, themeConfig) {
-        const { unified: unified2 } = await Promise.resolve().then(() => (init_unified(), unified_exports));
-        const remarkParse2 = (await Promise.resolve().then(() => (init_remark_parse(), remark_parse_exports))).default;
-        const remarkGfm2 = (await Promise.resolve().then(() => (init_remark_gfm(), remark_gfm_exports))).default;
-        const remarkMath2 = (await Promise.resolve().then(() => (init_remark_math(), remark_math_exports))).default;
-        const remarkSuperSub2 = (await Promise.resolve().then(() => (init_remark_super_sub(), remark_super_sub_exports))).default;
-        const remarkRehype2 = (await Promise.resolve().then(() => (init_remark_rehype(), remark_rehype_exports))).default;
-        const rehypeKatex2 = (await Promise.resolve().then(() => (init_rehype_katex(), rehype_katex_exports))).default;
-        const rehypeHighlight2 = (await Promise.resolve().then(() => (init_rehype_highlight(), rehype_highlight_exports))).default;
-        const rehypeStringify2 = (await Promise.resolve().then(() => (init_rehype_stringify(), rehype_stringify_exports))).default;
-        const { visit: visit2 } = await Promise.resolve().then(() => (init_unist_util_visit(), unist_util_visit_exports));
-        function rehypeBlockImages() {
-          return (tree) => {
-            visit2(tree, "element", (node2) => {
-              if (node2.tagName !== "p") return;
-              const children = node2.children || [];
-              if (children.length === 0) return;
-              let imageCount = 0;
-              let imageIndex = -1;
-              let hasSubstantialTextAfterImage = false;
-              let foundImage = false;
-              for (let i = 0; i < children.length; i++) {
-                const child = children[i];
-                if (child.type === "element" && child.tagName === "img") {
-                  imageCount++;
-                  imageIndex = i;
-                  foundImage = true;
-                } else if (foundImage) {
-                  if (child.type === "text" && child.value.trim() !== "") {
-                    hasSubstantialTextAfterImage = true;
-                  } else if (child.type === "element" && child.tagName !== "br") {
-                    hasSubstantialTextAfterImage = true;
-                  }
-                }
-              }
-              if (imageCount === 1 && !hasSubstantialTextAfterImage && imageIndex >= 0) {
-                const img = children[imageIndex];
-                img.properties = img.properties || {};
-                const existingClass = img.properties.className || [];
-                img.properties.className = Array.isArray(existingClass) ? [...existingClass, "block-image"] : [existingClass, "block-image"];
-              }
-            });
+      async exportToString(markdown2, options = {}) {
+        ensureBase64Globals();
+        const themeId = options.theme || "default";
+        const basePath = options.basePath || process.cwd();
+        const moduleDir = path5.dirname(fileURLToPath3(import.meta.url));
+        const diagramMode = options.diagramMode || "live";
+        const { platform } = createNodePlatform({
+          moduleDir,
+          selectedThemeId: themeId,
+          output: { kind: "buffer" }
+        });
+        const previousPlatform = globalThis.platform;
+        globalThis.platform = platform;
+        let browserRenderer = null;
+        try {
+          const themeConfig = await loadRendererThemeConfig(themeId);
+          if (diagramMode === "img") {
+            browserRenderer = await createBrowserRenderer();
+            if (browserRenderer) {
+              await browserRenderer.initialize();
+            }
+          }
+          const fragment = await markdownToHtmlFragment(markdown2, browserRenderer, basePath, themeConfig, diagramMode);
+          const standalone = options.standalone !== false;
+          if (!standalone) return fragment;
+          let katexCss = "";
+          try {
+            katexCss = loadKatexCss();
+          } catch (e) {
+            console.warn("Failed to load KaTeX CSS for HTML export:", e);
+          }
+          const baseCss = await loadBaseCss(options.htmlHrAsPageBreak ?? false);
+          let themeCss = "";
+          try {
+            themeCss = await loadThemeCss(themeId);
+          } catch (e) {
+            console.warn("Failed to load theme CSS for HTML export, using base styles only:", e);
+          }
+          const css2 = katexCss + "\n" + baseCss + "\n" + themeCss;
+          const title = options.title || "Document";
+          const shouldEmitBase = options.baseTag !== false && !!basePath;
+          const baseHref = shouldEmitBase ? pathToFileURL3(basePath + path5.sep).href : "";
+          const baseTag = baseHref ? `  <base href="${escapeHtmlText(baseHref)}" />
+` : "";
+          const cdnBaseDefaults = {
+            mermaid: "https://cdn.jsdelivr.net/npm/mermaid@11.12.2/dist/mermaid.min.js",
+            // Preferred: modern Graphviz WASM build (provides window.Viz.instance()).
+            vizGlobal: "https://cdn.jsdelivr.net/npm/@viz-js/viz@3.24.0/dist/viz-global.js",
+            // Legacy fallback (provides window.Viz constructor).
+            viz: "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.js",
+            vizRender: "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js",
+            infographic: "https://cdn.jsdelivr.net/npm/@antv/infographic@0.2.7/dist/infographic.min.js"
+          };
+          const cdnVegaDefaultsByMajor = {
+            // Vega-Lite v5 is typically used with Vega v5 + Vega-Embed v6.
+            5: {
+              vega: "https://cdn.jsdelivr.net/npm/vega@5/build/vega.min.js",
+              vegaLite: "https://cdn.jsdelivr.net/npm/vega-lite@5/build/vega-lite.min.js",
+              vegaEmbed: "https://cdn.jsdelivr.net/npm/vega-embed@6/build/vega-embed.min.js"
+            },
+            // Vega-Lite v6 is typically used with Vega v6 + Vega-Embed v7.
+            6: {
+              vega: "https://cdn.jsdelivr.net/npm/vega@6/build/vega.min.js",
+              vegaLite: "https://cdn.jsdelivr.net/npm/vega-lite@6/build/vega-lite.min.js",
+              vegaEmbed: "https://cdn.jsdelivr.net/npm/vega-embed@7/build/vega-embed.min.js"
+            }
           };
+          const cdnOverrides = options.cdn ?? {};
+          const liveBootstrap = diagramMode !== "live" ? "" : `
+  <!-- md2x live diagram renderer (CDN) -->
+  <script>
+  (function () {
+    const themeConfig = ${JSON.stringify(themeConfig ?? null)};
+    const baseHref = ${JSON.stringify(baseHref)};
+    const cdnOverrides = ${JSON.stringify(cdnOverrides)};
+    const cdnBaseDefaults = ${JSON.stringify(cdnBaseDefaults)};
+    const cdnVegaDefaultsByMajor = ${JSON.stringify(cdnVegaDefaultsByMajor)};
+
+    function loadScript(src) {
+      return new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = src;
+        s.async = false;
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error('Failed to load script: ' + src));
+        document.head.appendChild(s);
+      });
+    }
+
+    function getLangFromCodeClass(codeEl) {
+      const cls = (codeEl && codeEl.className) ? String(codeEl.className) : '';
+      const m = cls.match(/\\blanguage-([a-z0-9-]+)\\b/i);
+      return m ? m[1] : '';
+    }
+
+    function normalizeLang(lang) {
+      const l = String(lang || '').toLowerCase();
+      if (l === 'graphviz' || l === 'gv') return 'dot';
+      if (l === 'vegalite') return 'vega-lite';
+      return l;
+    }
+
+    function guessVegaLiteSchemaMajorFromSpec(spec) {
+      if (!spec || typeof spec !== 'object') return null;
+      const schema = spec.$schema;
+      if (typeof schema !== 'string') return null;
+      const m = schema.match(/\\/vega-lite\\/v(\\d+)(?:\\.|\\.json|$)/i) || schema.match(/\\/v(\\d+)\\.json$/i);
+      if (!m) return null;
+      const major = parseInt(m[1], 10);
+      return Number.isFinite(major) ? major : null;
+    }
+
+    function guessVegaLiteSchemaMajorFromText(text) {
+      const t = String(text || '');
+      const m = t.match(/\\/vega-lite\\/v(\\d+)(?:\\.|\\.json|$)/i) || t.match(/\\/v(\\d+)\\.json$/i);
+      if (!m) return null;
+      const major = parseInt(m[1], 10);
+      return Number.isFinite(major) ? major : null;
+    }
+
+    function detectVegaLiteMajorFromDocument() {
+      // Scan vega-lite blocks and pick a major version based on $schema.
+      const blocks = Array.from(document.querySelectorAll('pre > code'));
+      let detected = null;
+      for (const codeEl of blocks) {
+        const langRaw = getLangFromCodeClass(codeEl);
+        const lang = normalizeLang(langRaw);
+        if (lang !== 'vega-lite') continue;
+
+        const text = (codeEl && codeEl.textContent) ? codeEl.textContent : '';
+        if (!text.trim()) continue;
+
+        // Prefer a regex scan first so we can still detect schema versions for
+        // code blocks that aren't strictly valid JSON (e.g. trailing commas).
+        const majorFromText = guessVegaLiteSchemaMajorFromText(text);
+        if (majorFromText && (majorFromText === 5 || majorFromText === 6)) {
+          detected = majorFromText;
+          if (majorFromText === 6) return 6;
+          continue;
+        }
+
+        try {
+          const spec = JSON.parse(text);
+          const major = guessVegaLiteSchemaMajorFromSpec(spec);
+          if (major && (major === 5 || major === 6)) {
+            detected = major;
+            // If any block is v6, prefer v6. Otherwise keep v5.
+            if (major === 6) return 6;
+          }
+        } catch {
+          // ignore parse errors
         }
-        const processor = unified2().use(remarkParse2).use(remarkGfm2, { singleTilde: false }).use(remarkMath2).use(remarkSuperSub2).use(remarkRehype2, { allowDangerousHtml: true }).use(rehypeKatex2).use(rehypeHighlight2).use(rehypeBlockImages).use(rehypeStringify2, { allowDangerousHtml: true });
-        const file = await processor.process(markdown2);
-        let html7 = String(file);
-        html7 = await this.processDiagrams(html7, browserRenderer, basePath, themeConfig);
-        return html7;
       }
-      /**
-       * Process diagram code blocks and replace with rendered images
-       */
-      async processDiagrams(html7, browserRenderer, basePath, themeConfig) {
-        const pluginLangs = plugins.filter((p3) => p3.nodeSelector.includes("code")).map((p3) => p3.language).filter((lang) => lang !== null);
-        const aliases = ["graphviz", "gv", "vegalite"];
-        const supportedLangs = [...pluginLangs, ...aliases].join("|");
-        const codeBlockRegex = new RegExp(
-          `<pre><code class="(?:hljs )?language-(${supportedLangs})">([\\s\\S]*?)<\\/code><\\/pre>`,
-          "gi"
-        );
-        const matches = [...html7.matchAll(codeBlockRegex)];
-        for (const match of matches) {
-          const [fullMatch, lang, code4] = match;
-          const decodedCode = this.decodeHtmlEntities(code4);
-          let renderType = lang.toLowerCase();
-          if (renderType === "graphviz" || renderType === "gv") renderType = "dot";
-          if (renderType === "vegalite") renderType = "vega-lite";
+      return detected || 6;
+    }
+
+    async function ensureCdnLibsLoaded() {
+      const major = detectVegaLiteMajorFromDocument();
+      const vegaDefaults = cdnVegaDefaultsByMajor[String(major)] || cdnVegaDefaultsByMajor['6'];
+      const cdn = Object.assign({}, cdnBaseDefaults, vegaDefaults, cdnOverrides || {});
+
+      // Load order matters.
+      await loadScript(cdn.mermaid);
+      if (cdn.vizGlobal) {
+        await loadScript(cdn.vizGlobal);
+      } else {
+        await loadScript(cdn.viz);
+        await loadScript(cdn.vizRender);
+      }
+      await loadScript(cdn.vega);
+      await loadScript(cdn.vegaLite);
+      await loadScript(cdn.vegaEmbed);
+      await loadScript(cdn.infographic);
+    }
+
+    function replacePreWithContainer(preEl, kind) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'md2x-diagram';
+      wrapper.setAttribute('data-md2x-diagram-kind', kind);
+      wrapper.style.maxWidth = '100%';
+      const inner = document.createElement('div');
+      inner.className = 'md2x-diagram-inner';
+      inner.style.display = 'inline-block';
+      inner.style.maxWidth = '100%';
+      const mount = document.createElement('div');
+      mount.className = 'md2x-diagram-mount';
+      mount.style.maxWidth = '100%';
+      inner.appendChild(mount);
+      wrapper.appendChild(inner);
+      preEl.replaceWith(wrapper);
+      return mount;
+    }
+
+    function getText(codeEl) {
+      return (codeEl && codeEl.textContent) ? codeEl.textContent : '';
+    }
+
+    async function renderMermaid(code, mount, id) {
+      const mermaid = window.mermaid;
+      if (!mermaid) return;
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: 'default',
+        securityLevel: 'loose',
+        fontFamily: themeConfig && themeConfig.fontFamily ? themeConfig.fontFamily : undefined,
+      });
+      const out = await mermaid.render('md2x-mermaid-' + id, code);
+      mount.innerHTML = out && out.svg ? out.svg : '';
+    }
+
+    async function renderDot(code, mount) {
+      const VizGlobal = window.Viz;
+      // Preferred: @viz-js/viz global build
+      if (VizGlobal && typeof VizGlobal.instance === 'function') {
+        const viz = await VizGlobal.instance();
+        const svgEl = viz.renderSVGElement(code, { graphAttributes: { bgcolor: 'transparent' } });
+        mount.appendChild(svgEl);
+        return;
+      }
+
+      // Legacy: viz.js
+      if (typeof window.Viz === 'function') {
+        const viz = new window.Viz();
+        const svgEl = await viz.renderSVGElement(code);
+        mount.appendChild(svgEl);
+      }
+    }
+
+    function applyDefaultVegaLiteSort(spec) {
+      // If users mark a field as ordinal, a common expectation is "use the data order"
+      // (e.g. '1\u6708'...'12\u6708'). Vega-Lite defaults to sorting discrete domains, which can
+      // produce surprising orders for stringified numbers. We only change behavior
+      // when the author hasn't specified an explicit sort.
+      const applyOne = (s) => {
+        if (!s || typeof s !== 'object') return;
+        const enc = s.encoding;
+        const x = enc && enc.x;
+        if (x && typeof x === 'object' && x.type === 'ordinal' && !('sort' in x)) {
+          x.sort = null;
+        }
+      };
+
+      const walk = (s) => {
+        if (!s || typeof s !== 'object') return;
+        applyOne(s);
+
+        const arrays = ['layer', 'hconcat', 'vconcat', 'concat'];
+        for (const key of arrays) {
+          const childArr = s[key];
+          if (Array.isArray(childArr)) {
+            for (const child of childArr) walk(child);
+          }
+        }
+        if (s.spec) walk(s.spec);
+      };
+
+      walk(spec);
+    }
+
+    async function renderVegaLite(code, mount) {
+      const vegaEmbed = window.vegaEmbed;
+      if (typeof vegaEmbed !== 'function') return;
+      let spec;
+      try {
+        spec = JSON.parse(code);
+      } catch {
+        mount.textContent = 'Invalid Vega-Lite JSON.';
+        return;
+      }
+      applyDefaultVegaLiteSort(spec);
+      await vegaEmbed(mount, spec, {
+        actions: false,
+        renderer: 'svg',
+        defaultStyle: true,
+        logLevel: (window.vega && window.vega.Warn) ? window.vega.Warn : undefined,
+      });
+    }
+
+    async function renderInfographic(code, mount) {
+      const lib = window.AntVInfographic;
+      if (!lib || !lib.Infographic) return;
+
+      try {
+        if (typeof lib.setDefaultFont === 'function') {
+          const ff = themeConfig && themeConfig.fontFamily ? themeConfig.fontFamily : undefined;
+          if (ff) lib.setDefaultFont(ff);
+        }
+      } catch {}
+
+      const opts = {
+        container: mount,
+        width: 900,
+        height: 600,
+        padding: 24,
+      };
+
+      if (themeConfig && themeConfig.diagramStyle === 'handDrawn') {
+        opts.themeConfig = { stylize: { type: 'rough', roughness: 0.5, bowing: 0.5 } };
+      }
+
+      const ig = new lib.Infographic(opts);
+      await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => reject(new Error('Infographic render timeout after 10s')), 10000);
+        ig.on && ig.on('rendered', () => { clearTimeout(timeout); resolve(); });
+        ig.on && ig.on('error', (err) => { clearTimeout(timeout); reject(err); });
+        try {
+          ig.render(code);
+        } catch (e) {
+          clearTimeout(timeout);
+          reject(e);
+        }
+      }).catch(() => {
+        // keep container content on errors
+      });
+    }
+
+    async function main() {
+      // Best-effort base href: some renderers may load assets relative to document.
+      try {
+        if (baseHref) {
+          let base = document.querySelector('base');
+          if (!base) {
+            base = document.createElement('base');
+            document.head.appendChild(base);
+          }
+          base.href = baseHref;
+        }
+      } catch {}
+
+      try {
+        await ensureCdnLibsLoaded();
+      } catch (e) {
+        // If CDN scripts fail to load, keep code blocks as-is.
+        return;
+      }
+
+      const blocks = Array.from(document.querySelectorAll('pre > code'));
+      let idx = 0;
+      for (const codeEl of blocks) {
+        const pre = codeEl && codeEl.parentElement;
+        if (!pre) continue;
+        const langRaw = getLangFromCodeClass(codeEl);
+        if (!langRaw) continue;
+        const lang = normalizeLang(langRaw);
+        const code = getText(codeEl);
+        if (!code.trim()) continue;
+
+        try {
+          if (lang === 'mermaid') {
+            const mount = replacePreWithContainer(pre, 'mermaid');
+            await renderMermaid(code, mount, idx++);
+          } else if (lang === 'dot') {
+            const mount = replacePreWithContainer(pre, 'dot');
+            await renderDot(code, mount);
+          } else if (lang === 'vega-lite') {
+            const mount = replacePreWithContainer(pre, 'vega-lite');
+            await renderVegaLite(code, mount);
+          } else if (lang === 'infographic') {
+            const mount = replacePreWithContainer(pre, 'infographic');
+            await renderInfographic(code, mount);
+          }
+        } catch {
+          // Keep original code block on error
+        }
+      }
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => { main(); }, { once: true });
+    } else {
+      main();
+    }
+  })();
+  </script>`;
+          return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+${baseTag}  <title>${escapeHtmlText(title)}</title>
+  <style>${css2}</style>
+</head>
+<body>
+  <div id="markdown-content" class="markdown-body">${fragment}</div>
+${liveBootstrap}
+</body>
+</html>`;
+        } finally {
           try {
-            const result = await browserRenderer.render(renderType, decodedCode, basePath, themeConfig);
-            if (result && result.base64) {
-              const imgTag = `<div class="md2x-diagram"><img class="md2x-diagram" src="data:image/${result.format};base64,${result.base64}" alt="${lang} diagram" style="max-width: 100%;" /></div>`;
-              html7 = html7.replace(fullMatch, imgTag);
+            if (browserRenderer) {
+              await browserRenderer.close();
             }
-          } catch (e) {
-            console.warn(`Failed to render ${lang} diagram:`, e);
+          } finally {
+            globalThis.platform = previousPlatform;
           }
         }
-        return html7;
       }
-      /**
-       * Decode HTML entities in code blocks
-       */
-      decodeHtmlEntities(text9) {
-        return text9.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#x3C;/gi, "<").replace(/&#x3E;/gi, ">").replace(/&#x26;/gi, "&").replace(/&#60;/g, "<").replace(/&#62;/g, ">").replace(/&#38;/g, "&");
+      async exportToBuffer(markdown2, options = {}) {
+        const html7 = await this.exportToString(markdown2, options);
+        return Buffer.from(html7, "utf8");
+      }
+      async exportToFile(inputPath, outputPath, options = {}) {
+        const markdown2 = fs3.readFileSync(inputPath, "utf-8");
+        const basePath = options.basePath || path5.dirname(path5.resolve(inputPath));
+        const title = options.title || path5.basename(inputPath, path5.extname(inputPath));
+        const outputDir = path5.dirname(outputPath);
+        if (!fs3.existsSync(outputDir)) {
+          fs3.mkdirSync(outputDir, { recursive: true });
+        }
+        const html7 = await this.exportToString(markdown2, {
+          ...options,
+          basePath,
+          title
+        });
+        fs3.writeFileSync(outputPath, html7, "utf8");
       }
     };
     node_exporter_default = NodeDocxExporter;
@@ -128156,17 +128602,36 @@ async function markdownToPdfBuffer(markdown2, options = {}) {
   const exporter = new NodePdfExporter2();
   return exporter.exportToBuffer(markdown2, options);
 }
+async function markdownToHtmlString(markdown2, options = {}) {
+  const { NodeHtmlExporter: NodeHtmlExporter2 } = await Promise.resolve().then(() => (init_node_exporter(), node_exporter_exports));
+  const exporter = new NodeHtmlExporter2();
+  return exporter.exportToString(markdown2, options);
+}
+async function markdownToHtmlBuffer(markdown2, options = {}) {
+  const { NodeHtmlExporter: NodeHtmlExporter2 } = await Promise.resolve().then(() => (init_node_exporter(), node_exporter_exports));
+  const exporter = new NodeHtmlExporter2();
+  return exporter.exportToBuffer(markdown2, options);
+}
 async function markdownFileToPdfFile(inputPath, outputPath, options = {}) {
   const { NodePdfExporter: NodePdfExporter2 } = await Promise.resolve().then(() => (init_node_exporter(), node_exporter_exports));
   const exporter = new NodePdfExporter2();
   return exporter.exportToFile(inputPath, outputPath, options);
 }
+async function markdownFileToHtmlFile(inputPath, outputPath, options = {}) {
+  const { NodeHtmlExporter: NodeHtmlExporter2 } = await Promise.resolve().then(() => (init_node_exporter(), node_exporter_exports));
+  const exporter = new NodeHtmlExporter2();
+  return exporter.exportToFile(inputPath, outputPath, options);
+}
 export {
   NodeDocxExporter,
+  NodeHtmlExporter,
   NodePdfExporter,
   markdownFileToDocxFile,
+  markdownFileToHtmlFile,
   markdownFileToPdfFile,
   markdownToDocxBuffer,
+  markdownToHtmlBuffer,
+  markdownToHtmlString,
   markdownToPdfBuffer
 };
 /*! Bundled license information: