FIG-001/ COMPONENT

component renderer.

Hand the built-in KatexRenderer through the renderers prop for both inlineKatex and blockKatex. Reusable, testable, dark-mode aware.

  • markedKatex() extension turns \(…\) and \[…\] syntax into inlineKatex / blockKatex tokens.
  • Built-in KatexRenderer handles both modes, AMS environments, and dark-mode stylesheet variants out of the box.
  • Best when math rendering should be consistent across the whole site — one renderer, no per-page chrome.
↩ all examples
override · component mode · live running source
EDITOR markdown
PREVIEW rendered

Euler's Identity

The equation eiπ+1=0e^{i\pi} + 1 = 0 unites five fundamental constants.

Quadratic Formula

Every quadratic ax2+bx+c=0ax^2 + bx + c = 0 has solutions:

x=b±b24ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Mixed Content

Markdown works alongside math: bold, italic, and inline i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}.

Gaussian Integral

ex2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Tip: Use \(...\) for inline math and \[...\] for block math. AMS environments work too.

AMS environment

n=11n2=π26\begin{equation} \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} \end{equation}
category · component
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ SNIPPET

snippet overrides.

Inline {#snippet inlineKatex} + {#snippet blockKatex} blocks call katex.renderToString directly. Best for one-off layouts or wrapping the math output in custom chrome per page.

  • {#snippet inlineKatex({ text })} + {#snippet blockKatex({ text })} call katex.renderToString directly inside one component.
  • Best for pages that need wrapper chrome (figure + caption, custom container) or site-specific math styling.
↩ all examples
override · inline snippets mode · live running source
EDITOR markdown
PREVIEW snippets

Euler's Identity

The equation eiπ+1=0e^{i\pi} + 1 = 0 unites five fundamental constants.

Quadratic Formula

Every quadratic ax2+bx+c=0ax^2 + bx + c = 0 has solutions:

x=b±b24ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Mixed Content

Markdown works alongside math: bold, italic, and inline i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}.

Gaussian Integral

ex2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Tip: Use \(...\) for inline math and \[...\] for block math. AMS environments work too.

AMS environment

n=11n2=π26\begin{equation} \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} \end{equation}
category · snippet
sheet · sheet 02 / 02
⟳ to re-run