LaTeX

LaTeX renders math with KaTeX. Block equations use the LaTeX component; inline math uses the synchronous toLaTeX() function, which returns KaTeX HTML you can place anywhere (a rehype plugin, dangerouslySetInnerHTML, a template). KaTeX is a direct dependency, so both render at build/SSR time with proper glyphs — no placeholder, no lazy import, no double render. Import the KaTeX stylesheet once (katex/dist/katex.min.css).

e^{i\\pi} + 1 = 0

e^{i\pi} + 1 = 0

// apps/docs/src/components/examples/latex/block/react.tsx
import { LaTeX } from '@cloudvoyant/helical-react';

export default function ReactLaTeXBlock() {
  return <LaTeX latex="e^{i\\pi} + 1 = 0" />;
}

<!-- apps/docs/src/components/examples/latex/block/svelte.svelte -->
<script lang="ts">
  import { LaTeX } from '@cloudvoyant/helical-svelte';

  const latex = 'e^{i\\pi} + 1 = 0';
</script>

<LaTeX {latex} />

Examples

Inline

The identity $e^{i\pi} + 1 = 0$ rendered inline.

// apps/docs/src/components/examples/latex/inline/react.tsx
import { toLaTeX } from '@cloudvoyant/helical-ui';

export default function ReactLaTeXInline() {
  return (
    <p>
      The identity <span dangerouslySetInnerHTML={{ __html: toLaTeX('e^{i\\pi} + 1 = 0') }} /> rendered inline.
    </p>
  );
}

<!-- apps/docs/src/components/examples/latex/inline/svelte.svelte -->
<script lang="ts">
  import { toLaTeX } from '@cloudvoyant/helical-ui';
  const html = toLaTeX('e^{i\\pi} + 1 = 0');
</script>

<p>
  The identity {@html html} rendered inline.
</p>

Prerendered

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

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

// apps/docs/src/components/examples/latex/prerendered/react.tsx
import { LaTeX } from '@cloudvoyant/helical-react';
import { toLaTeX } from '@cloudvoyant/helical-ui';

const latex = '\\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi}';

export default function ReactLaTeXPrerendered() {
  return <LaTeX latex={latex} html={toLaTeX(latex, { displayMode: true })} />;
}

<!-- apps/docs/src/components/examples/latex/prerendered/svelte.svelte -->
<script lang="ts">
  import { LaTeX } from '@cloudvoyant/helical-svelte';
  import { toLaTeX } from '@cloudvoyant/helical-ui';

  const latex = '\\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi}';
  const html = toLaTeX(latex, { displayMode: true });
</script>

<LaTeX {latex} {html} />

Inline math

Inline math is a function, not a component:

import { toLaTeX } from '@cloudvoyant/helical-ui';

// React / JSX

<span dangerouslySetInnerHTML={{ __html: toLaTeX('e^{i\\pi} + 1 = 0') }} />

// Svelte
{@html toLaTeX('e^{i\\pi} + 1 = 0')}

toLaTeX(latex, { displayMode? }) renders inline by default; block output is toLaTeX(latex, { displayMode: true }) (which is what the LaTeX component wraps).

Using in Markdown / MDX

The typical markdown authoring syntax for math is $...$ (inline) and $$...$$ (block). A rehype-katex plugin turns those into toLaTeX() output at build time:

The identity $e^{i\pi} + 1 = 0$ holds for all reals.

$$\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}$$

The LaTeX component’s html prop accepts that pre-rendered output directly, so an MDX pipeline can pass the plugin’s string straight through without importing KaTeX a second time.

API Reference

LaTeX

Prop	Type	Description
`latex`	`string`	LaTeX source. Required.
`html`	`string`	Pre-rendered KaTeX HTML (server path).

toLaTeX

toLaTeX(latex: string, opts?: { displayMode?: boolean }): string — renders LaTeX to a KaTeX HTML string synchronously. throwOnError/strict are disabled so malformed input renders best-effort instead of throwing.