Semantic by design
Tokens carry meaning beyond color: headings, links, delimiters, emphasis, and more.
Explore renderers →One semantic tokenizer for browser highlights, accessible HTML, JSON tooling, and ANSI terminals.
type Token = { type: string; start: number; end: number };
class Highlighter {
private cache = new Map<string, Token[]>();
constructor(private language = 'typescript') {}
highlight(src: string): Token[] {
const hit = this.cache.get(src);
if (hit) return hit;
const toks = tokenize(this.language, src);
this.cache.set(src, toks);
return toks;
}
}
Edit the code or pick a language — highlighted with the real tokenizer.
Benchmarks
End-to-end highlighting (tokenize + HTML) over 101 real-world samples.
| Engine | Time (lower ↓) | Relative | Throughput | Files |
|---|---|---|---|---|
| sugar-high | 23.4ms | 4.08 MB/s | 27 | |
| Prism | 47.1ms | 4.19 MB/s | 90 | |
| @opentf/syntax-highlighter | 50.1ms | 3.96 MB/s | 92 | |
| highlight.js | 80.9ms | 2.28 MB/s | 81 | |
| lowlight | 97.3ms | 1.81 MB/s | 77 | |
| Shiki | 715.2ms | 0.28 MB/s | 92 |
Each engine ran the files it supports; pairs share identical file sets. Median of 8 runs on the esdev runtime, 2026-09-20. starry-night is unreachable from this registry.
Tokens carry meaning beyond color: headings, links, delimiters, emphasis, and more.
Explore renderers →Use CSS Custom Highlights in the browser and avoid a forest of syntax spans.
Read the approach →Keep output consistent across a live editor, server render, developer tool, and terminal.
Start integrating →Bring your code to every surface.
Read the quickstart →