highlight.js

Highlight.js is a JavaScript library that adds syntax highlighting to code blocks in the browser or on the server, with no runtime dependencies and no required build step. Drop in a script tag and a stylesheet, call hljs.highlightAll(), and it scans the page for <pre><code> blocks, automatically detects the language of each one, and wraps tokens in CSS classes that any of its ~100 bundled themes can style.

Beyond the drop-in browser build, highlight.js ships a core entry point for tree-shaken bundles that only register the languages an app actually needs, a full Node.js API for highlighting code server-side (used heavily in static-site generators and Markdown renderers), and a plugin system for extending behavior such as line numbers or copy buttons. The library has been a fixture of the JS ecosystem since 2011 and remains actively maintained, with over 190 language grammars covering everything from mainstream languages to esoteric DSLs.

What You Get

• A syntax-highlighting engine with automatic language detection across 190+ bundled language grammars
• Multiple import strategies: a monolithic browser build, a core module for registering only the languages you need, and a Node.js require/import-friendly package
• Around 100 CSS themes covering popular editor color schemes (GitHub, Monokai, Atom One, etc.)
• A plugin API for extending highlighting behavior (line numbers, copy-to-clipboard, custom renderers)
• First-class TypeScript type definitions (types/index.d.ts) shipped in the package
• A documented language-grammar authoring format (mode-reference.rst, language-guide.rst) for adding or customizing language definitions

Common Use Cases

• Highlighting code blocks rendered from Markdown in blogs, documentation sites, and static-site generators
• Adding syntax highlighting to a CMS, wiki, or forum’s rich-text code snippets
• Server-side rendering of highlighted code (e.g. in a Node.js SSG build step) so pages ship pre-highlighted HTML with no client-side JS cost
• Embedding a lightweight, dependency-free highlighter in browser extensions or Electron apps where bundle size matters

Under The Hood

Architecture - Highlighting flows through three stages: src/highlight.js (the HLJS factory) owns the public API and orchestrates a call into lib/mode_compiler.js, which compiles a declarative language grammar (a tree of Mode objects with begin/end/contains regex rules) into a CompiledLanguage with an internal MultiRegex matcher that combines many small regexes into one big alternation for fast single-pass scanning. As the compiled matcher walks the input, lib/token_tree.js’s TokenTreeEmitter builds a tree of matched tokens, which lib/html_renderer.js walks to emit the final <span class="hljs-*"> HTML. Automatic language detection (highlightAuto) simply runs this pipeline against every registered language and picks the highest-scoring result, capped by MAX_KEYWORD_HITS heuristics in highlight.js.

Tech Stack - The library itself is plain ES modules with zero runtime dependencies (confirmed in package.json’s empty dependencies), targeting Node >=12 and browsers directly via a <script> tag. Build tooling uses Rollup (@rollup/plugin-commonjs, @rollup/plugin-node-resolve) plus Terser for minification, ESLint (eslint-config-standard) for linting, and TypeScript purely for authoring the shipped .d.ts type definitions (types/index.d.ts) rather than for the implementation, which stays plain JavaScript.

Code Quality - The test/ directory holds 46 files split into api/, detect/, markup/, parser/, and regex/ suites run via Mocha (npm test), covering the public API surface, auto-detection accuracy, and low-level regex/parser internals. Internal modules are small and single-purpose (regex.js at 156 lines, utils.js at 36 lines, mode_compiler.js at 432 lines), consistently documented with JSDoc @typedef blocks referencing the shared highlight.js type definitions, which gives editor-level type checking without a TypeScript build step.

API Design - The public surface is deliberately small: highlightAll() for zero-config browser use, highlightElement()/configure() for finer control, and highlight(code, {language}) / highlightAuto(code) for the underlying Node/programmatic API, with registerLanguage() to opt into a la carte grammars via the core entry point. This layered design — one line to get started, explicit imports to shrink bundle size — plus the shipped TypeScript types keeps the getting-started cost low while still supporting advanced use (custom languages, plugins) without extra ceremony.