Skip to content
Roman's notes

Syntax highlighting

Modern JavaScript libraries for syntax highlighting code blocks in docs, blogs, and web apps. This list focuses on established projects, but their release cadence and maintenance model vary.

Quick recommendation

Section titled “Quick recommendation”
  • Use Shiki for static docs and SSR output with VS Code-like quality.
  • Use Prism when you need a lightweight client-side highlighter with many plugins.
  • Use Highlight.js for easy setup and automatic language detection.
  • Use @wooorm/starry-night if you want GitHub-style highlighting based on TextMate grammars.
  • Use Sugar High for tiny JS/JSX snippets, or when its limited set of language presets is sufficient.

Package comparison (snapshot 2026-08-17)

Section titled “Package comparison (snapshot 2026-08-17)”
PackageBest forLatest stable versionNotes
ShikiSSG/SSR docs, MDX pipelinesnpm 4.3.1High accuracy with TextMate grammars and VS Code themes; strong for build-time highlighting
PrismBrowser-side highlightingnpm 1.30.0Lightweight and extensible; v1 currently accepts security fixes while v2 is in development
Highlight.jsAuto-detection and quick integrationnpm 11.11.1Mature, widely adopted, and usable in browsers and on servers
@wooorm/starry-nightGitHub-like renderingnpm 3.10.0Uses TextMate grammars and produces a HAST syntax tree with GitHub-compatible CSS classes
refractorPrism AST output (rehype/unified)npm 5.0.0Wraps Prism and returns a HAST syntax tree instead of an HTML string
lowlighthighlight.js AST outputnpm 3.3.0Returns HAST and works well with virtual DOM and unified pipelines
Sugar HighTiny snippetsnpm 1.2.1About 1 kB for JS/JSX, with presets for C, CSS, diff, Go, Java, Python, and Rust

Notes

Section titled “Notes”
  • For full in-browser editing (not just highlighting), see Embeddable editors.
  • For documentation sites, build-time highlighting avoids client-side processing and a flash of unhighlighted code.

Sources

Section titled “Sources”