init

tools/marp-mermaid-engine.mjs

@@ -0,0 +1,125 @@
+/**
+ * marp-mermaid-engine —— 让这套 deck 离线也能渲染「原生 mermaid」
+ *
+ * 背景：本机装的 marp-cli 4.5.1 自带的 marp-core 4.4.0 里没有 mermaid（二进制里搜不到这个词），
+ * 而 marp-core v5 的 mermaid 插件需要联网装 beautiful-mermaid。为了在离线环境也能用原生
+ * mermaid 语法，这里把 marp-core 的 fence 渲染规则换掉：遇到 ```mermaid 代码块时，
+ * 调用 vendor/mermaid 里那份 mermaid + Chromium 无头渲染成内联 <svg>。
+ * markdown 里保持原生 mermaid 写法和 fence，输出里是真的 mermaid 图。
+ *
+ * 用法（marp.config.mjs）：
+ *   export default { engine: './tools/marp-mermaid-engine.mjs', ... }
+ *
+ * 可调环境变量：
+ *   MARP_MERMAID_DIR        mermaid dist 目录（默认 vendor/mermaid）
+ *   MARP_MERMAID_CHROMIUM   浏览器可执行文件（默认 /usr/bin/chromium）
+ *
+ * 如果以后装了 marp-core v5 的 mermaid 插件，把这个 engine 配置删掉即可切回官方渲染。
+ */
+import { execFileSync } from 'node:child_process'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+
+const CHROMIUM = process.env.MARP_MERMAID_CHROMIUM || '/usr/bin/chromium'
+const MERMAID_DIR =
+  process.env.MARP_MERMAID_DIR || path.join(here, '..', 'vendor', 'mermaid')
+const MERMAID_JS = path.join(MERMAID_DIR, 'mermaid.min.js')
+
+/** 图的外观，跟主题主色对齐 */
+const MERMAID_CONFIG = {
+  startOnLoad: false,
+  theme: 'base',
+  themeVariables: {
+    primaryColor: '#e8f1fa',
+    primaryBorderColor: '#004e98',
+    primaryTextColor: '#1a1a1a',
+    lineColor: '#004e98',
+    fontFamily: '"Noto Sans CJK SC", "Source Han Sans SC", sans-serif',
+    fontSize: '24px',
+  },
+  // wrappingWidth 给够, 免得节点里的中文被折成两行
+  flowchart: { curve: 'basis', wrappingWidth: 360, padding: 14, nodeSpacing: 60 },
+}
+
+let seq = 0
+
+/** 同步渲染（markdown-it 的渲染函数必须是同步的，所以用 execFileSync 调 Chromium） */
+const renderMermaid = (code) => {
+  const id = `marp-mermaid-${++seq}`
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'marp-mermaid-'))
+  const mermaidJs = pathToFileURL(MERMAID_JS).href
+
+  fs.writeFileSync(
+    path.join(dir, 'index.html'),
+    `<!DOCTYPE html><html><body><div id="result"></div>
+<script src="${mermaidJs}"></script>
+<script>
+mermaid.initialize(${JSON.stringify(MERMAID_CONFIG)});
+mermaid.render(${JSON.stringify(id)}, ${JSON.stringify(code)})
+  .then(function (r) { document.getElementById('result').innerHTML = r.svg; })
+  .catch(function (e) { document.getElementById('result').dataset.error = String(e); });
+</script></body></html>`,
+  )
+
+  const dom = execFileSync(
+    CHROMIUM,
+    [
+      '--headless',
+      '--no-sandbox',
+      '--disable-gpu',
+      '--hide-scrollbars',
+      '--virtual-time-budget=10000',
+      '--dump-dom',
+      pathToFileURL(path.join(dir, 'index.html')).href,
+    ],
+    { encoding: 'utf8', maxBuffer: 128 * 1024 * 1024 },
+  )
+
+  const start = dom.indexOf('<svg')
+  const end = dom.lastIndexOf('</svg>')
+
+  if (start < 0 || end < 0)
+    throw new Error(
+      `mermaid 渲染失败: ${dom.match(/data-error="([^"]*)"/)?.[1] || '没有拿到 svg'}`,
+    )
+
+  return dom.slice(start, end + '</svg>'.length)
+}
+
+/**
+ * marp-cli 的「函数式 engine」
+ *
+ * 两个注意点（读 marp-cli 源码得出的结论）：
+ * 1. 必须是箭头函数 —— CLI 用 isClass() 判断，普通函数带 prototype 会被当成类去 new；
+ * 2. 参数里的 marp 是 CLI 自带 marp-core 的一个**实例**（不是类）。改完它的 markdown
+ *    渲染规则后，把这个实例返回即可。
+ */
+const marpMermaidEngine = ({ marp }) => {
+  const md = marp.markdown
+  const originalFence = md.renderer.rules.fence
+
+  md.renderer.rules.fence = (tokens, idx, mdOpts, env, self) => {
+    const token = tokens[idx]
+    const info = (token.info || '').trim().toLowerCase()
+
+    if (info === 'mermaid' || info.startsWith('mermaid ')) {
+      try {
+        return `<div class="mermaid-diagram">${renderMermaid(token.content)}</div>\n`
+      } catch (e) {
+        process.stderr.write(`[marp-mermaid] ${e.message}\n`)
+        process.stderr.write('[marp-mermaid] 已回退成普通代码块\n')
+      }
+    }
+
+    return originalFence(tokens, idx, mdOpts, env, self)
+  }
+
+  return marp
+}
+
+export default marpMermaidEngine
+