# Syntax Highlighting (Shiki)
> Highlight code blocks in @humanspeak/svelte-markdown with the opt-in Shiki extension — a synchronous, streaming-compatible ShikiCode renderer with a safe escaped fallback.
**Source:** [https://markdown.svelte.page/examples/shiki](https://markdown.svelte.page/examples/shiki)
**Markdown mirror:** [https://markdown.svelte.page/examples/shiki.md](https://markdown.svelte.page/examples/shiki.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: shiki renderer.
Map `ShikiCode` to the `code` renderer and inject a highlighter via Svelte context. Highlighting runs synchronously, so streaming stays enabled — edit the markdown live.
**Metadata:** tag: `COMPONENT` | override: `component`
### Notes
- `ShikiCode` is a drop-in for the built-in `code` renderer (same `lang` / `text` props) — only fenced blocks change.
- Shiki's `createHighlighterCoreSync` + the JS regex engine highlight synchronously, so the async-extension guard never trips and `streaming` stays on.
- Import only the `shiki/langs/*` and `shiki/themes/*` you need — everything else is tree-shaken out, and the core bundle stays shiki-free.
### Source
#### ComponentRendered.svelte
Source file: [src/lib/examples/shiki/demos/ComponentRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/shiki/demos/ComponentRendered.svelte)
````svelte
{#snippet left()}
{/snippet}
{#snippet right()}
{/snippet}
````
## FIG-002: safe fallback.
Unregistered languages (and any per-block failure) degrade to an escaped `` instead of throwing mid-stream — the untrusted lang is only ever an escaped `data-lang`.
**Metadata:** tag: `FALLBACK` | lang: `unregistered`
### Notes
- The fenced `lang` is untrusted (agent/LLM input) — the fallback escapes, never interpolates it, emitting it only as an escaped `data-lang`.
- Shiki escapes the code it emits and the fallback escapes too, so the `{@html}` sink only ever receives library-generated or escaped markup.
- Style `.shiki-fallback` to match your registered blocks — the content is a plain escaped ` `.
### Source
#### FallbackRendered.svelte
Source file: [src/lib/examples/shiki/demos/FallbackRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/shiki/demos/FallbackRendered.svelte)
```svelte
{#snippet left()}
{source}
{/snippet}
{#snippet right()}
{/snippet}
```