TanStack
Highlight
Web-first syntax highlighting

TanStackHighlight

alpha

Highlighting that knows it is going into a webpage.

Register the languages your docs use, highlight synchronously, and ship one compact semantic HTML tree that every theme can share. No editor engine or initialization phase required.

2.1 ThousandTotal Downloads268Weekly Downloads2GitHub Stars
Build a highlighter
1.74 KB
empty core
25
languages
1 tree
every theme
live output
01
02import { createHighlighter } from '@tanstack/highlight/core'
03import { tsx, css } from './languages'
04
05const highlight = createHighlighter({ languages: [tsx, css] })
06
07const html = highlight(code, {
08 lang: 'tsx',
09 highlight: [2, 4, 5],
10})
sync
semantic classes
escaped HTML
Selective assembly

The registry is the bundle plan.

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

createHighlighter({
languages: [tsx, css, markdown]
})
gzip profileadd only what is used →
coreno languages1.74 KB
tsxcore + TSX3.86 KB
docs9 languages5.83 KB
all25 languages7.96 KB
Semantic output

Change the palette. Keep the markup.

Tokens carry stable th-* classes instead of theme colors. CSS variables recolor the same tree, so dark mode does not require a second highlighting pass or a second copy of the HTML.

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
Context-aware scanners

Web languages rarely stay in their lane.

HTML, Vue, Svelte, EJS, Markdown, and JavaScript templates embed other languages. Highlight delegates those regions only when the nested language is registered, while preserving every source character around them.

component.vueregistered: html · ts · css
HTML scanner
<section class="result">
Vue expression → TS
{{ score.toFixed(2) }}
HTML scanner
</section>
script → TS
<script setup lang="ts">
const score: number = 0.98
</script>
style → CSS
<style>.result { color: var(--accent) }</style>
Web

TS · TSX · JS · JSX · CSS · HTML

Content

Markdown · MDX · JSON · YAML

Shell

Bash · Shell · PowerShell

Frameworks

Vue · Svelte · Astro · EJS

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
Presentation metadata

Annotate the lesson, not the token stream.

Highlight lines, exact character ranges, insertions, deletions, focus, errors, and warnings. Decorations split token boundaries cleanly without changing the underlying source or tokenizer.

{2,4-6}insdelfocuswarningtitle
Corpus, not toys

Tuned against the docs it will actually render.

The committed corpus samples 333 fixtures from 2,940 TanStack documentation files. Release checks cover token fidelity, deterministic HTML, bundle profiles, and at least 10,000 blocks per runtime run.

TanStack docs corpustimeHTML
TanStack Highlight20 ms364 KiB
Shiki~1.2 s1,252 KiB
2,940 docs files scanned333 committed fixtures10,000+ blocks per gate

Project benchmark report. This measures the tested corpus and output shape, not equivalent grammar accuracy; Shiki targets deeper TextMate fidelity.

Choose by job

A docs highlighter is not an editor highlighter.

Highlight is optimized for known web languages and compact page output. It deliberately does not chase TextMate completeness, automatic detection, hundreds of languages, or incremental editor state.

TanStack Highlight

Known docs languages, compact HTML, CSS themes, and annotations matter most.

Shiki

TextMate and VS Code fidelity, broad language coverage, and editor-grade themes are the job.

Sugar High

The smallest straightforward JavaScript and TypeScript path is enough.

Explicit integrations

Drop it into Markdown without hiding the language set.

Use the direct renderer, a structured remark adapter, an idempotent rehype adapter, or the Octane MDX path. Every adapter receives the highlighter you assembled; none imports every language behind your back.

Natural companion
TanStackMarkdown

A serializable document model that keeps code highlighting at an explicit boundary.

Explore Markdown
Open source, measured in public

Every byte and every fixture has a job.

Language scanners, embedded delegation, renderer output, adapters, and bundle profiles are checked against the same committed corpus.

Maintainers

Avatar of Tanner Linsley
Tanner Linsley
View All Maintainers

Partners

Gold
CodeRabbit
Lovable
Cloudflare
Netlify
Railway
Silver
OpenRouter
WorkOS
AG Grid
Clerk
SerpApi
Bronze
Sentry
Unkey
Prisma
Electric
Highlight You?
We're looking for TanStack Highlight Partners to join our mission! Partner with us to push the boundaries of TanStack Highlight and build amazing things together.
Let's chat
View Previous Partners

GitHub Sponsors

Become a Sponsor

Register. Highlight. Ship.

Put the code on the page, not an editor in the bundle.

Build your language set
© 2026 TanStack LLC