feat: math要素のレンダリングをMathML+SVGポリフィル方式に変更

- temmlでLaTeX→MathML変換（サーバーサイド）
- hfmathでMathMLポリフィル（クライアントサイド、MathML非対応ブラウザのみ）
- 数式参照（eref）のツールチップ・スクロール機能を実装
- mathブロック内のバックスラッシュ+改行を正しく処理
- Wikidot形式のアライメント（&）を自動でaligned環境にラップ

Author: r74tech

bun.lock

@@ -45,6 +45,8 @@ export default defineWorkspace([
       dts: true,
       minify: false,
       clean: true,
+      external: ["hfmath"],
+      target: "browser",
     },
   },
 ]);

bunup.config.ts

@@ -16,6 +16,7 @@
     "@wdprlib/parser": "workspace:*",
     "@wdprlib/render": "workspace:*",
     "@wdprlib/runtime": "workspace:*",
+    "hfmath": "^0.0.2",
     "hono": "^4.7.5"
   },
   "devDependencies": {

examples/wdmock-cf/apps/main/package.json

@@ -75,6 +75,8 @@ export const mathBlockRule: BlockRule = {
     }
 
     // Collect LaTeX content until [[/math]]
+    // BACKSLASH_BREAK (U+E000) was created by preprocessing from "\\\n"
+    // In math blocks, we need to restore this as "\\\n" for LaTeX line breaks
     let latexSource = "";
 
     while (pos < ctx.tokens.length) {
@@ -89,7 +91,12 @@ export const mathBlockRule: BlockRule = {
         }
       }
 
-      latexSource += token.value;
+      // Restore BACKSLASH_BREAK to original "\\\n" for LaTeX
+      if (token.type === "BACKSLASH_BREAK") {
+        latexSource += "\\\n";
+      } else {
+        latexSource += token.value;
+      }
       pos++;
       consumed++;
     }

packages/parser/src/parser/rules/block/math.ts

@@ -39,6 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@wdprlib/ast": "workspace:*"
+    "@wdprlib/ast": "workspace:*",
+    "temml": "^0.13.1"
   }
 }

packages/render/package.json

@@ -1,35 +1,114 @@
 import type { MathData, MathInlineData } from "@wdprlib/ast";
 import type { RenderContext } from "../context";
 import { escapeAttr, escapeHtml } from "../escape";
+import temml from "temml";
+
+/**
+ * Check if LaTeX needs to be wrapped in aligned environment.
+ * Wikidot-style math blocks with & alignment markers need this.
+ */
+function needsAlignedWrapper(latex: string): boolean {
+  // Already has an environment
+  if (/\\begin\s*\{/.test(latex)) {
+    return false;
+  }
+  // Has alignment marker (&) but not escaped (\&) - needs aligned environment
+  // Remove escaped ampersands first, then check for unescaped ones
+  const withoutEscaped = latex.replace(/\\&/g, "");
+  return withoutEscaped.includes("&");
+}
+
+/**
+ * Render LaTeX to MathML using temml.
+ * Returns empty string on error.
+ */
+function renderLatexToMathML(latex: string, displayMode: boolean): string {
+  try {
+    // Wrap in aligned environment if needed for Wikidot-style alignment
+    let processedLatex = latex;
+    if (displayMode && needsAlignedWrapper(latex)) {
+      processedLatex = `\\begin{aligned}\n${latex}\n\\end{aligned}`;
+    }
+    return temml.renderToString(processedLatex, {
+      displayMode,
+      throwOnError: false,
+      annotate: false,
+    });
+  } catch {
+    return "";
+  }
+}
 
 /** Render a block math element */
 export function renderMath(ctx: RenderContext, data: MathData): void {
   const index = ctx.nextEquationIndex() + 1;
+  const latex = data["latex-source"];
+  const mathml = renderLatexToMathML(latex, true);
+
+  const id = data.name ? `equation-${data.name}` : `equation-${index}`;
+  const dataName = data.name ? ` data-name="${escapeAttr(data.name)}"` : "";
+
+  ctx.push(`<div class="math-block" id="${escapeAttr(id)}"${dataName}>`);
 
+  // Equation number (only for named equations)
   if (data.name) {
     ctx.push(`<span class="equation-number">(${index})</span>`);
   }
 
-  const id = data.name ? `equation-${data.name}` : `equation-${index}`;
-  ctx.push(`<div class="math-equation" id="${escapeAttr(id)}">`);
-  ctx.push(escapeHtml(data["latex-source"]));
+  // Hidden LaTeX source (for polyfill)
+  ctx.push(`<code class="math-source" hidden aria-hidden="true">`);
+  ctx.push(escapeHtml(latex));
+  ctx.push(`</code>`);
+
+  // MathML output
+  ctx.push(`<span class="math-render">`);
+  if (mathml) {
+    ctx.push(mathml);
+  } else {
+    // Fallback: display error
+    ctx.push(`<span class="math-error">`);
+    ctx.push(escapeHtml(latex));
+    ctx.push(`</span>`);
+  }
+  ctx.push(`</span>`);
+
   ctx.push("</div>");
 }
 
 /** Render an inline math element */
 export function renderMathInline(ctx: RenderContext, data: MathInlineData): void {
-  ctx.push(`<span class="math-inline">$`);
-  ctx.push(escapeHtml(data["latex-source"]));
-  ctx.push("$</span>");
+  const latex = data["latex-source"];
+  const mathml = renderLatexToMathML(latex, false);
+
+  ctx.push(`<span class="math-inline">`);
+
+  // Hidden LaTeX source (for polyfill)
+  ctx.push(`<code class="math-source" hidden aria-hidden="true">`);
+  ctx.push(escapeHtml(latex));
+  ctx.push(`</code>`);
+
+  // MathML output
+  ctx.push(`<span class="math-render">`);
+  if (mathml) {
+    ctx.push(mathml);
+  } else {
+    // Fallback: display with $ delimiters
+    ctx.push(`<span class="math-error">$`);
+    ctx.push(escapeHtml(latex));
+    ctx.push(`$</span>`);
+  }
+  ctx.push(`</span>`);
+
+  ctx.push("</span>");
 }
 
 /** Render an equation reference (link to named equation) */
 export function renderEquationRef(ctx: RenderContext, name: string): void {
-  // Create a link to the named equation
-  // The equation index is not available at render time without tracking,
-  // so we generate a link that can be resolved client-side or with post-processing
   const id = `equation-${name}`;
-  ctx.push(`<a class="equation-ref" href="#${escapeAttr(id)}">`);
+  ctx.push(`<span class="eref" data-target="${escapeAttr(id)}">`);
+  ctx.push(`<a class="eref-link" href="#${escapeAttr(id)}">`);
   ctx.push(escapeHtml(name));
-  ctx.push("</a>");
+  ctx.push(`</a>`);
+  ctx.push(`<span class="eref-tooltip" aria-hidden="true"></span>`);
+  ctx.push("</span>");
 }

packages/render/src/elements/math.ts

@@ -36,5 +36,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "hfmath": "^0.0.2"
   }
 }

packages/runtime/package.json

@@ -30,7 +30,7 @@ export function initWdprRuntime(options?: RuntimeOptions): WdprRuntime {
   cleanups.push(initJoin(root, options));
   cleanups.push(initHtmlBlockResize(root));
 
-  cleanups.push(initMath(root, options));
+  cleanups.push(initMath(root));
 
   initOdate(root);
   initEmail(root);