LaTeX math in Comark, in place of comark/plugins/math: $…$ and \(…\) inline, $$…$$, \[…\], and math fences as display math, typeset to MathML while parsing, so the page loads no math script, fonts, or stylesheet. For HTML, Vue, React, and Svelte.
pnpm add comark comark-mathmlimport { createHtmlRenderer } from "@comark/html";
import math, { components } from "comark-mathml/html";
const render = createHtmlRenderer({ plugins: [math()], components });The pond holds $n$ ducks, and each pair shares one roll:
$$
\binom{n}{2} = \frac{n(n-1)}{2}
$$The parse plugin typesets each formula with Temml while parsing. \href and \url don't render. Prices such as $5 and $10, citations such as \[1\], and anything in code stay text. output: "html" or "htmlAndMathml" uses KaTeX's HTML instead, which needs katex installed and katex/dist/katex.css on the page.
The plugin adds every formula that doesn't typeset to meta.issues, with the reason, and renders its TeX in its place.
| Renderer | Import |
|---|---|
@comark/html |
comark-mathml/html: the styles are inlined |
@comark/vue |
comark-mathml/vue |
@comark/react |
comark-mathml/react |
@comark/svelte |
comark-mathml/svelte |
Each entry exports the parse plugin as default and the renderer's components. The Vue, React, and Svelte components add the styles when they mount; import comark-mathml/style.css with your styles so a server-rendered page doesn't shift.