# Highlight Engines > Stream the same AI response through Shiki and TanStack Highlight side by side with one HighlightedCode renderer — live per-engine highlight timings, semantic-class vs inline-color output, and bundle tradeoffs. **Source:** [https://markdown.svelte.page/examples/highlight-engines](https://markdown.svelte.page/examples/highlight-engines) **Markdown mirror:** [https://markdown.svelte.page/examples/highlight-engines.md](https://markdown.svelte.page/examples/highlight-engines.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: 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. **Metadata:** tag: `STREAMING` | renderer: `HighlightedCode` ### Notes - 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). ### Source #### StreamingSideBySide.svelte Source file: [src/lib/examples/highlight-engines/demos/StreamingSideBySide.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/highlight-engines/demos/StreamingSideBySide.svelte) ```svelte {@html ``}
renderer · HighlightedCode engines shiki · tanstack progress {progress}% {#if isStreaming}● LIVE{:else}○ IDLE{/if}
SRC / STREAMING {input.length} chars
{#if showSource} {#if isStreaming || chunkIndex > 0} 
{displaySource}
{:else} {/if} {/if}
SHIKI / TEXTMATE inline colors
calls {shikiStats.calls} total {formatMs(shikiStats.totalMs)} last {formatMs(shikiStats.lastMs)} peak {formatMs(shikiStats.peakMs)}
TANSTACK / SCANNERS th-* classes
calls {tanstackStats.calls} total {formatMs(tanstackStats.totalMs)} last {formatMs(tanstackStats.lastMs)} peak {formatMs(tanstackStats.peakMs)}
chunk
{#each ['word', 'character'] as m (m)} {/each}
``` #### EnginePane.svelte Source file: [src/lib/examples/highlight-engines/demos/EnginePane.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/highlight-engines/demos/EnginePane.svelte) ```svelte
```