logo svelte /markdown v1.9.4
FIG-001/ STREAMING

shiki vs tanstack.

The same code-heavy response streams into two SvelteMarkdown instances. Both use the engine-agnostic HighlightedCode renderer; each pane injects a different CodeHighlighter via context. Every highlight call is timed so you can see the per-engine cost as fences close.

  • One renderer, any engine: HighlightedCode reads a CodeHighlighter from a prop, HIGHLIGHT_CONTEXT_KEY, or the setCodeHighlighter singleton. Swapping Shiki for TanStack is a one-line factory change.
  • Both engines are synchronous, so neither trips the async-extension guard and streaming stays on. Completed fences are memoized — watch calls stop climbing once a block closes and prose keeps streaming.
  • The timings are per-engine wall-clock for every highlight call, captured by wrapping the two-method interface. The open fence re-highlights per flush; that is where the engines separate.
  • Shiki inlines theme colors per token. TanStack emits semantic th-* classes; the theme is a stylesheet from createThemeCss, so light/dark is a CSS toggle with no re-highlight.
  • Both engines are opt-in peers. Importing the renderer alone bundles neither; the core SvelteMarkdown bundle stays engine-free (enforced by the tree-shaking guard).
↩ all examples
renderer · HighlightedCode mode · live running source
renderer · HighlightedCode engines shiki · tanstack progress 0% ○ IDLE
SHIKI / TEXTMATE inline colors
calls 0 total 0ms last 0ms peak 0ms
TANSTACK / SCANNERS th-* classes
calls 0 total 0ms last 0ms peak 0ms
chunk
category · streaming
sheet · sheet 01 / 01
⟳ to re-run

Highlight Engines