renderers.ts

/**
 * yalt + KaTeX / MathJax / Temml
 *
 * yalt is renderer-agnostic. `toRenderInput` returns `{ tex, displayMode }`
 * which maps directly to every major math renderer's API.
 *
 * Run:  npx tsx examples/renderers.ts
 * (Only the KaTeX section runs - MathJax and Temml sections are
 * reference patterns for browser use.)
 */
import katex from 'katex';
// --- yalt: import one-shot parse and the renderer helper ---
import { parse, toRenderInput } from 'yalt';

const input =
  'Inline: $E = mc^2$. Display: $$\\int_0^\\infty e^{-x}\\,dx = 1$$' +
  ' Environment: \\begin{align} a &= b \\\\ c &= d \\end{align}';

// --- yalt: parse the input into text + math events ---
const events = parse(input);
const mathEvents = events.filter((e) => e.type === 'math');

// ── KaTeX ───────────────────────────────────────────────────────────
// npm install katex
// KaTeX uses `displayMode` (boolean).

console.log('── KaTeX ──\n');
for (const event of mathEvents) {
  // --- yalt: toRenderInput returns { tex, displayMode } for any renderer ---
  const { tex, displayMode } = toRenderInput(event);
  const html = katex.renderToString(tex, {
    displayMode,
    throwOnError: false,
  });
  console.log(`  ${displayMode ? 'block' : 'inline'}: ${tex}`);
  console.log(`  html: ${html.slice(0, 80)}…\n`);
}

// ── MathJax v3 (browser) ───────────────────────────────────────────
// <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
// MathJax uses `display` (boolean), not `displayMode`.
//
//   const { tex, displayMode } = toRenderInput(event);
//   const node = MathJax.tex2svg(tex, { display: displayMode });
//   container.append(node);
//
// Or with CHTML output:
//   const node = MathJax.tex2chtml(tex, { display: displayMode });
//   container.append(node);

console.log('── MathJax v3 (reference) ──\n');
for (const event of mathEvents) {
  const { tex, displayMode } = toRenderInput(event);
  console.log(`  MathJax.tex2svg('${tex}', { display: ${displayMode} })`);
}

// ── Temml ───────────────────────────────────────────────────────────
// npm install temml
// Temml renders to MathML (native browser rendering, no fonts needed).
// Temml uses `displayMode` (boolean), same as KaTeX.
//
//   import temml from 'temml';
//   const { tex, displayMode } = toRenderInput(event);
//   const html = temml.renderToString(tex, { displayMode });

console.log('\n── Temml (reference) ──\n');
for (const event of mathEvents) {
  const { tex, displayMode } = toRenderInput(event);
  console.log(`  temml.renderToString('${tex}', { displayMode: ${displayMode} })`);
}