logo svelte /markdown v1.8.2
FIG-001/ COMPONENT

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.

  • 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.
↩ all examples
override · component mode · live running source
EDITOR markdown
PREVIEW diagrams

Shiki Highlighting

Fenced blocks render through Shiki synchronously — no async work, so streaming stays enabled.

interface User {
    id: number
    name: string
}

const greet = (user: User): string => `Hello, ${user.name}!`
{ "langs": ["javascript", "typescript", "json"], "theme": "github-dark" }

Inline code uses the codespan renderer and is left untouched.

category · component
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ FALLBACK

safe fallback.

Unregistered languages (and any per-block failure) degrade to an escaped <pre class="shiki-fallback"> instead of throwing mid-stream — the untrusted lang is only ever an escaped data-lang.

  • 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 <pre><code>.
↩ all examples
lang · unregistered mode · live running source
SOURCE markdown
### Registered language (`ts`)

```ts
const total: number = [1, 2, 3].reduce((a, b) => a + b, 0)
```

### Unregistered language (`rust`) — safe escaped fallback

```rust
fn main() {
    let markup = "<b>bold</b> & <i>italic</i>";
    println!("{markup}");
}
```
PREVIEW diagrams

Registered language (ts)

const total: number = [1, 2, 3].reduce((a, b) => a + b, 0)

Unregistered language (rust) — safe escaped fallback

fn main() {
    let markup = "<b>bold</b> & <i>italic</i>";
    println!("{markup}");
}
category · fallback
sheet · sheet 02 / 02
⟳ to re-run

Syntax Highlighting (Shiki)