Sugar High
Zero-dependency ~1KB syntax highlighter for 25 languages, themed with CSS vars
A tiny syntax highlighter by huozhi (a Next.js maintainer) that takes a string and returns HTML, with no DOM and no dependencies, so it runs in the browser, in Node, and in any other JS runtime. It covers 25 languages — JavaScript, TypeScript, CSS, Python, C, C++, C#, Go, Java, Rust, JSON, Diff, Shell, SQL, HTML, YAML, Markdown, Kotlin, Swift, PHP, TOML, PowerShell, Dockerfile, GraphQL and HCL — which the README frames as the formats coding agents actually emit. Themes are scoped CSS custom properties rather than a bundled stylesheet, and line highlighting is done by targeting .sh__line. The repo also publishes @sugar-high/react (an <Editor /> and a <Code /> component) and @sugar-high/remark for markdown code fences.
npm install sugar-highPick this over Shiki or Prism when payload matters more than fidelity — an MDX blog, a docs site, a chat UI streaming code back to the user — because it is roughly a kilobyte gzipped, has no dependencies and needs no async theme loading or WASM. It returns an HTML string, so pair it with dangerouslySetInnerHTML or use @sugar-high/react, and theme it by defining the --sh-* CSS variables in both colour schemes rather than looking for a theme package. Accept the trade: the tokenizer is heuristic and lighter than a real grammar, so exotic syntax will occasionally mis-colour; if you need TextMate-grade accuracy, use Shiki.
Why it is here. It solves the real cost of syntax highlighting on the web — the bundle — and its language list is chosen for what LLMs actually output, which makes it the sane default inside chat and agent interfaces.
- ~1KB minified and gzipped
- Zero dependencies, no DOM needed
- 25 languages
- Themed by CSS custom properties
- @sugar-high/react and @sugar-high/remark packages
- Built by a Next.js maintainer
Verified 2026-08-15. HTTP 200. https://sugar-high.vercel.app/, https://github.com/huozhi/sugar-high
