Highlight

alpha

Highlighting built for the web.

Fast syntax highlighting that keeps your bundles small and your code looking good.

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 88,342weekly downloads 82GitHub stars

Only pay for the languages you need.

Start with a tiny core, bring the languages you actually use, and leave the rest out of your bundle. Change your mind about the colors? CSS has you covered.

1.0.0 · gzip · KB = 1,000 bytes

coreno languages1.82 KB

tsxcore + TSX4.29 KB

docs9 languages6.22 KB

all30 languages10.79 KB

Minified browser source-entry builds, measured October 1, 2026 with Node 26.3.1. Sizes vary with imports and build tools. Measurement details

A fresh coat of paint.

Go dark, go light, or offer a whole menu of themes with CSS variables, all using the same markup without shipping extra copies or highlighting everything again.

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

Go ahead, mix your languages.

Put JavaScript in your HTML, CSS in your Vue components, or mix them together like you normally do, and we’ll highlight the languages right where they are.

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

Dim the lights and get your point across… or underlined, too.

Make changed lines pop, fade everything around them, or underline the bit you’re explaining with annotations you control and CSS that makes it yours.

BYO Markdown.

Add syntax highlighting to TanStack Markdown, Remark, Rehype, Octane MDX, or whatever you’re building with, using a ready-made integration or wiring it up your way.

TanStackMarkdown

Parse and render Markdown, then add syntax highlighting with a callback.

Explore Markdown