# Marked Extensions
> Render live KaTeX math in @humanspeak/svelte-markdown with markedKatex, using a built-in KatexRenderer component or an inline Svelte 5 snippet.
**Source:** [https://markdown.svelte.page/examples/marked-extensions](https://markdown.svelte.page/examples/marked-extensions)
**Markdown mirror:** [https://markdown.svelte.page/examples/marked-extensions.md](https://markdown.svelte.page/examples/marked-extensions.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: component renderer.
Hand the built-in `KatexRenderer` through the `renderers` prop for both `inlineKatex` and `blockKatex`. Reusable, testable, dark-mode aware.
**Metadata:** tag: `COMPONENT` | override: `component`
### Notes
- `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.
### Source
#### ComponentRendered.svelte
Source file: [src/lib/examples/marked-extensions/demos/ComponentRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/marked-extensions/demos/ComponentRendered.svelte)
```svelte
{#snippet left()}
{/snippet}
{#snippet right()}
{/snippet}
```
## FIG-002: 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.
**Metadata:** tag: `SNIPPET` | override: `inline snippets`
### Notes
- `{#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.
### Source
#### SnippetRendered.svelte
Source file: [src/lib/examples/marked-extensions/demos/SnippetRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/marked-extensions/demos/SnippetRendered.svelte)
```svelte
{#snippet left()}
{/snippet}
{#snippet right()}