speed-highlight

A tiny, fast, simple syntax highlighter for the web and the terminal in JavaScript

• Tiny (~1.5 kB gzipped core, ~1 kB gzipped per language)
• Fast (generally outperforms Prism and highlight.js, see the benchmark)
• Simple (zero dependencies)

Playground

• Quick start
• How it works
• Comparison
• Web usage
  • In a component
  • On a plain page
  • Detect the language
  • Control loading and bundling
  • CDN (no build step)
• Terminal usage
• API
• Languages
• Themes
• Custom languages
• Custom themes
• Migrating from v1
• Benchmark

Quick start

npm i @speed-highlight/core

In a terminal, print the highlighted string:

import { highlightANSI } from '@speed-highlight/core';
import theme from '@speed-highlight/core/themes/default.js';

console.log(await highlightANSI('console.log("hello")', 'js', theme));

In a component, highlight a string and render it:

import { useEffect, useState } from 'react';
import { highlightHTML } from '@speed-highlight/core';
import '@speed-highlight/core/themes/default.css';

export function Code({ code, lang }) {
	const [html, setHtml] = useState('');

	useEffect(() => {
		// highlightHTML is async (languages load on first use), skip stale results
		let stale = false;
		highlightHTML(code, lang).then(result => { if (!stale) setHtml(result); });
		return () => { stale = true; };
	}, [code, lang]);

	return <div className={`shj-lang-${lang} shj-block`} dangerouslySetInnerHTML={{ __html: html }} />;
}

How it works

The tokenizer runs a language's regex rules over your code and emits typed tokens (kwd, str, cmnt, ...). On the web each token becomes a <span class="shj-syn-kwd">; in the terminal it becomes an ANSI escape code. A theme is just CSS (or a token-to-escape map) coloring those names, which is why themes are under 1 kB and writing your own is a few lines.

Comparison

Highlighters trade size for grammar fidelity: TextMate engines (Shiki, starry-night) are the most faithful and heaviest, mature regex engines (highlight.js, Prism) sit in the middle, lightweight regex tokenizers (speed-highlight, sugar-high) are the smallest and approximate on exotic syntax.

	Core (gzip)	Per language (gzip)	Languages	Grammar model	Terminal	Status	Choose it for
speed-highlight	1.5 kB	0.07–1.6 kB	~30	lightweight regex	✅ built in	✅ v2 (this repo)	runtime highlighting where size and startup matter
sugar-high	1.7 kB	0.18–2.9 kB	25	lightweight regex	❌	✅ v2.0.0	CSS-variable theming, JSX/TSX-aware JavaScript
Prism	3.1 kB	0.3–3 kB	~290	mature regex	❌	⚠️ v1.30.0, frozen since Mar 2025 (v2 rewrite)	its plugin ecosystem
highlight.js	8.3 kB	0.3–2.5 kB	~190	mature regex	❌ (via wrappers)	✅ v11.11 (Jun 2026)	broad auto-detection and rare languages
Shiki	35 kB + engine: 145 kB WASM or 20 kB JS	5–16 kB	~220	TextMate (VS Code)	✅ via @shikijs/cli	✅ v4.4, very active	highest fidelity (the same grammars as VS Code); zero client JS when run at build time
starry-night	185 kB incl. WASM	3–25 kB	600+	TextMate (GitHub)	❌	✅ active	GitHub-identical rendering in Node

Sizes are min+gzip, measured from the installed packages at the versions shown (per-language = range over the benchmark corpus; starry-night figures from its own README). Wrappers reuse these engines and inherit their numbers: lowlight/refractor wrap highlight.js/Prism for virtual DOMs, rehype-pretty-code and bright wrap Shiki, and the terminal-only emphasize and cli-highlight wrap highlight.js grammars into ANSI. Editors (CodeMirror, Monaco, tree-sitter) are a different category.

If you highlight at build time and bytes do not matter, use Shiki. speed-highlight's case is the opposite one: highlighting at runtime, where the entire library with all 34 grammars bundled into one file gzips to 9.0 kB, barely more than highlight.js's core alone, before it has loaded a single grammar.

Web usage

In a component

Frameworks own their DOM, so highlight the string and render it, as in the quick start (mutating a mounted node with highlightElement gets wiped on the next render). The output is HTML-escaped (&, <, >), safe to inject even for untrusted code; the shj-lang-* and shj-block classes hook it into the theme. The same pattern works in Vue, Svelte, and Angular; ready-made components are in #85.

On a plain page

Mark code blocks with a shj-lang-* class and call highlightAll once:

<div class="shj-lang-js">console.log('hello')</div>
<code class="shj-lang-js">inline code</code>

<script type="module">
	import { highlightAll } from '@speed-highlight/core';
	highlightAll();
</script>

Blocks are a single <div> instead of <pre><code> so the line-number gutter can be laid out inside; the shj-lang- prefix avoids colliding with Prism's language-* during a migration.

For per-element control use highlightElement. It renders a code element inline and anything else as a block, accepts block as an override, and sets data-lang so a theme can render a language header with content: attr(data-lang):

import { highlightElement } from '@speed-highlight/core';

await highlightElement(element, 'js', { showLineNumbers: true });

Detect the language

Detection is a separate ~1 kB import so the core stays small. It recognizes about 20 common languages and returns 'plain' when unsure:

import { highlightElement } from '@speed-highlight/core';
import { detectLanguage } from '@speed-highlight/core/detect';

element.textContent = code;
await highlightElement(element, detectLanguage(code));

Control loading and bundling

Languages load lazily through a loader. Replace it with setLoader to add custom languages or restrict what your bundler includes; a name the loader cannot resolve renders as plain text:

import { setLoader, defaultLoader } from '@speed-highlight/core';

// add custom languages on top of the bundled ones
setLoader(name => customs[name] ?? defaultLoader(name));

// or allow only the languages your bundler can code-split
setLoader(name => ({
	js: () => import('@speed-highlight/core/languages/js.js'),
	css: () => import('@speed-highlight/core/languages/css.js'),
})[name]?.());

For full tree-shaking skip the loader entirely: tokenizeWith takes every language from the caller, so a bundler keeps only what you import. Include the sub-languages a grammar embeds (html uses css and js; js uses jsdoc, todo, and regex). A sub that is not given keeps the type of its rule and only skips the inner highlighting:

import { tokenizeWith } from '@speed-highlight/core/tokenize';
import { html, css, js, jsdoc, todo, regex } from '@speed-highlight/core/languages';

tokenizeWith(code, html, (str, type) => { /* ... */ }, { languages: { css, js, jsdoc, todo, regex } });

CDN (no build step)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@speed-highlight/core@2/dist/themes/default.css">
<script type="module">
	import { highlightAll } from 'https://cdn.jsdelivr.net/npm/@speed-highlight/core@2/dist/index.js';
	highlightAll();
</script>

Terminal usage

highlightANSI returns a string ready to print; the theme is required, import one from themes/*.js:

import { highlightANSI } from '@speed-highlight/core';
import theme from '@speed-highlight/core/themes/atom-dark.js';

console.log(await highlightANSI(code, 'js', theme));

A terminal theme is a plain token-to-escape map, built with the termcolor helpers or raw escapes:

import * as col from '@speed-highlight/core/themes/termcolor.js';

export default {
	kwd: col.red,
	str: col.green,
	cmnt: col.gray,
};

For Deno, use the deno module:

import { highlightANSI } from 'https://deno.land/x/speed_highlight_js/dist/index.js';
import theme from 'https://deno.land/x/speed_highlight_js/dist/themes/default.js';

console.log(await highlightANSI('console.log("hello")', 'js', theme));

API

The main entry covers most apps; reach for /tokenize when you want the raw token stream and full control over what gets bundled. Everything ships TypeScript types.

Entry	Export	Description
@speed-highlight/core	highlightAll(opt?)	Highlight every element with a shj-lang-* class
	highlightElement(elm, lang?, opt?)	Highlight one element (language read from its class by default)
	highlightHTML(src, lang, opt?)	Highlight a string, resolves to an HTML string
	highlightANSI(src, lang, theme)	Highlight a string, resolves to an ANSI string for terminals
	tokenize(src, lang, onToken)	Loader-based tokenizer, calls onToken(text, type)
	setLoader(loader) / defaultLoader	Replace or compose how language names are resolved
.../detect	detectLanguage(code)	Guess the language, 'plain' when unsure
.../tokenize	tokenizeWith(src, lang, onToken, opt?), tokenizer	Registry-free synchronous tokenizer (and the underlying generator), languages passed by the caller
.../languages	one named export per language	Grammars, import only what you need
.../themes/*.css		Web themes
.../themes/*.js		Terminal themes, plus termcolor.js helpers

lang is a name ('js') or a grammar object passed directly. opt is { block?: boolean, showLineNumbers?: boolean }: line numbers are opt-in, block defaults to true, except that highlightElement and highlightAll read it off the element instead, where a code element is inline and anything else is a block.

Languages

Name	CSS Class	Support	Detection	Size (gzip, 14.4 kB total)
Assembly	shj-lang-asm		✅	194 B
Bash	shj-lang-bash		✅	430 B
Brainfuck	shj-lang-bf	increment, operator, print, comment	❌	137 B
C	shj-lang-c		✅	429 B
CSS	shj-lang-css	comment, str, selector, units, function, ...	✅	332 B
CSV	shj-lang-csv	punctuation, ...	❌	96 B
Diff	shj-lang-diff		✅	144 B
Dockerfile	shj-lang-docker		✅	566 B
Git	shj-lang-git	comment, insert, deleted, string, ...	❌	222 B
Go	shj-lang-go		✅	329 B
HTML	shj-lang-html	inline style and event handlers	✅	726 B
HTTP	shj-lang-http	keywork, string, punctuation, variable, version	✅	986 B
INI	shj-lang-ini		❌	158 B
Java	shj-lang-java		✅	457 B
JavaScript	shj-lang-js	basic syntax, regex, jsdoc, json, template literals	⛔ reported as TypeScript	820 B
JSDoc	shj-lang-jsdoc		❌	251 B
JSON	shj-lang-json	string, number, bool, ...	❌	172 B
LeanPub Markdown	shj-lang-leanpub-md		❌	1.2 kB
Log	shj-lang-log	number, string, comment, errors	❌	223 B
Lua	shj-lang-lua		✅	273 B
Makefile	shj-lang-make		✅	223 B
Markdown	shj-lang-md		✅	1.1 kB
Perl	shj-lang-pl		✅	329 B
Plain text	shj-lang-plain		❌	71 B
Python	shj-lang-py		✅	416 B
Regex	shj-lang-regex	count, set, ...	❌	176 B
Rust	shj-lang-rs		✅	414 B
SQL	shj-lang-sql	number, string, function, ...	✅	1.7 kB
TODO	shj-lang-todo		❌	185 B
TOML	shj-lang-toml	comment, table, string, bool, variable	❌	236 B
TypeScript	shj-lang-ts	js syntax, ts keyword, types	✅	911 B
URI	shj-lang-uri		✅	176 B
XML	shj-lang-xml		✅	511 B
YAML	shj-lang-yaml	comment, numbers, variable, string, bool	✅	208 B

Themes

Name	Terminal (gzip)	Web (gzip)
default	✅ 174 B	✅ 603 B
atom-dark	✅ 174 B	✅ 699 B
dark	❌	✅ 695 B
github-dark	❌	✅ 691 B
github-dim	❌	✅ 700 B
github-light	❌	✅ 672 B
visual-studio-dark	❌	✅ 694 B

Custom languages

A language is an array of rules. Every rule's regex (global flag required) is tried; the earliest match in the string wins, ties go to the earlier rule:

export default [
	{ match: /\/\/.*/g, type: 'cmnt' },
	{ expand: 'str' },
	{ expand: 'num' },
	{ match: /\b(if|else|for|while|return)\b/g, type: 'kwd' },
];

• { match, type } tags what the regex matches with a token type
• { expand } reuses a shared pattern: 'num', 'str', or 'strDouble'
• { match, sub } re-tokenizes the matched region with another language: a name (loaded through the loader), an inline grammar array, or a function code => name | grammar deciding per match

A language can also set a default token for unmatched text by exporting { type, sub } instead of a bare array (see http.js). Use a grammar by passing it directly as lang, or register a name with setLoader. To extend an existing language, spread it after your rules:

import js from '@speed-highlight/core/languages/js.js';

export default [
	{ match: /\b(signal|effect)\b/g, type: 'func' },
	...js,
];

Token types:

Token	Used for		Token	Used for		Token	Used for
kwd	keywords		type	types		esc	escape sequences
str	strings		class	classes		section	section delimiters
num	numbers		var	variables		insert	inserted parts (diff)
cmnt	comments		oper	operators		deleted	deleted parts (diff)
func	functions		bool	booleans		err	errors

Missing a language? Open an issue or send a PR adding a file to src/languages/.

Custom themes

A web theme colors the token classes; start from default.css and override:

[class*="shj-lang-"] { color: #f8f8f2; background: #282a36; }
.shj-syn-kwd { color: #ff79c6; }
.shj-syn-str, .shj-syn-insert { color: #50fa7b; }
.shj-syn-cmnt { color: #6272a4; font-style: italic; }
.shj-numbers { color: #6272a4; }

Display-mode hooks: .shj-inline (inside code), .shj-block, and .shj-numbers for the gutter. Terminal themes are the token-to-escape maps shown in Terminal usage.

Migrating from v1

v1	v2
highlightText(src, lang)	highlightHTML(src, lang)
printHighlight(src, lang) from /terminal	console.log(await highlightANSI(src, lang, theme))
setTheme('atom-dark')	pass the theme: highlightANSI(src, lang, theme)
loadLanguage(name, grammar)	setLoader(...) or pass the grammar directly as lang
@speed-highlight/core/terminal entry	merged into @speed-highlight/core
common.js shared patterns	{ expand: 'num' | 'str' | 'strDouble' } built into the tokenizer
{ hideLineNumbers: true }	now the default, line numbers are opt-in with { showLineNumbers: true }
oneline display mode	removed, a div is always a block
highlightElement(elm, lang, mode, opt)	the mode moved into the options: highlightElement(elm, lang, { block })
shj-multiline class	shj-block

Benchmark

$ npm run benchmark
node v26.7.0, darwin arm64, Apple M4
corpus: js, css, json, md, sql, py, bash, tiled to 3 sizes (tiny (1 KB) / medium (16 KB) / huge (128 KB)), median of 9 trials per language, averaged across the corpus

                              tiny (1 KB)     medium (16 KB)      huge (128 KB)
speed-highlight         1,144,010 ops/min     74,720 ops/min      8,583 ops/min
prismjs                   655,152 ops/min     34,310 ops/min      2,575 ops/min
highlight.js              595,113 ops/min     48,666 ops/min      5,473 ops/min
sugar-high                238,406 ops/min     13,405 ops/min      1,376 ops/min
shiki (js engine)          89,925 ops/min      6,682 ops/min        841 ops/min

cold start (import + first highlight of test.js):
speed-highlight                    7.3 ms
prismjs                            8.6 ms
highlight.js                        19 ms
sugar-high                          18 ms
shiki (js engine)                  169 ms

speed-highlight per language (warm, median of 9 trials):
                              tiny (1 KB)     medium (16 KB)      huge (128 KB)
js                        666,642 ops/min     40,773 ops/min      4,704 ops/min
css                     1,006,895 ops/min     62,774 ops/min      7,284 ops/min
json                    1,964,840 ops/min    127,890 ops/min     15,057 ops/min
md                      1,080,739 ops/min     86,883 ops/min     10,453 ops/min
sql                     1,369,247 ops/min     88,513 ops/min     10,180 ops/min
py                        974,179 ops/min     56,165 ops/min      6,260 ops/min
bash                      945,526 ops/min     60,045 ops/min      6,141 ops/min

Identical inputs from examples/languages/, tiled up to each size bucket, HTML-string output for every library, one op = one highlighted file. Each figure is the median of 9 repeated trials, reported as ops/min (the huge bucket can drop below 1 op/sec for the slower libraries). Warm runs have grammars preloaded; cold start is import plus first highlight, measured once (not size-swept). Shiki does more work by design (see Comparison).