Sugar High

Zero-dependency ~1KB syntax highlighter for 25 languages, themed with CSS vars

Tier A · StrongComponent LibraryToolsugar-high.vercel.app

(Visit sugar-high.vercel.app ↗)(Docs)(Repository)

Preview image from sugar-high.vercel.app

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.

Install

npm install sugar-high

For an agent

Pick 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.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: CSS custom properties
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Structured documentation
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 1,200
Package: sugar-high

Components it ships

2 total

Code Block Code Editor

Helps you build

Blog Post API Documentation Changelog

Notable for

~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

Provenance

Verified 2026-08-15. HTTP 200. https://sugar-high.vercel.app/, https://github.com/huozhi/sugar-high

Also in Component Libraries

sugar-high.vercel.appTier A