Highlight

alpha

Highlighting built for the web.

Register the languages your docs use, highlight synchronously, and ship one compact semantic HTML tree that every theme can share.

Docs

example.tsx

02import { createHighlighter } from '@tanstack/highlight/core'

03import { tsx } from '@tanstack/highlight/languages/tsx'

05const highlighter = createHighlighter({ languages: [tsx] })

07const { html } = highlighter.highlight('<Button />', {

08 lang: 'tsx',

09 lineNumbers: true,

10})

sync

semantic classes

escaped HTML

3.7Ktotal downloads 31,783weekly downloads 76GitHub stars

The registry is the bundle plan.

The core knows no languages. Direct imports make the site’s language set explicit and let the bundler discard everything else.

0.0.11 · gzip · KB = 1,000 bytes

coreno languages1.82 KB

tsxcore + TSX4.03 KB

docs9 languages5.97 KB

all26 languages8.29 KB

Change the palette. Keep the markup.

Tokens carry stable semantic classes instead of theme colors. CSS variables recolor the same tree without a second highlighting pass.

output.html

<span class="th-keyword">
const
</span>

emitted once

themes.css

[data-theme=light]
--th-keyword: #a21caf

[data-theme=dark]
--th-keyword: #f0abfc

recolored by CSS

Web languages rarely stay in their lane.

HTML, Vue, Svelte, EJS, and Markdown delegate embedded regions only when the nested language is registered. JavaScript and TypeScript handle their own template interpolation.

component.vueregistered: vue · js · ts · css

HTML scanner

Vue expression → JS

HTML scanner

</section>

script → TS

style → CSS

Web

TS · TSX · JS · JSX · CSS · HTML

Content

Markdown · JSON · YAML · TOML

Shell

Bash · Shell · Zsh

Frameworks

Vue · Svelte · EJS · TSRX (Octane)

cache.ts{2,4-5} ins={5}

1const cache = new Map()

2const value = cache.get(key)

3if (value) return value

4const next = await load(key)

5cache.set(key, next)

6return next

Annotate the lesson, not the token stream.

Highlight lines, exact character ranges, insertions, deletions, focus, errors, and warnings without changing the source or tokenizer.

Tuned against the docs it will render.

Release checks cover source preservation, deterministic HTML, bundle sizes, and throughput across more than 10,000 code blocks, including numbered and decorated blocks.

334 docs fixtureswarmed timeHTML

TanStack Highlight4.6 ms365 KiB

Shiki 4.3.1182 ms1,257 KiB

Local measurements from the project benchmark report. Shiki initialization and language loading are measured separately; EJS, ENV, and TSRX use its plaintext fallback. Timings vary by machine, and the tools don’t provide equivalent grammar accuracy.