Highlight.js — Automatic Syntax Highlighting for the Web

Introduction

Highlight.js detects the programming language in <pre><code> blocks and applies syntax coloring automatically. It requires zero configuration for basic use and works across all modern browsers and Node.js environments.

What Highlight.js Does

• Automatically detects the programming language of code blocks
• Highlights syntax for nearly 200 languages including JS, Python, SQL, Rust, and Go
• Ships with over 90 color themes including popular ones like GitHub, Monokai, and Nord
• Works in browsers via a <script> tag and in Node.js via require/import
• Supports custom language grammars and third-party plugins

Architecture Overview

Highlight.js uses a grammar-based parser where each language is defined as a set of nested mode objects describing keywords, literals, comments, and strings. When highlightAll() is called, it scans <pre><code> elements, runs auto-detection by scoring each language grammar against the content, and wraps matched tokens in <span> elements with CSS classes. The library has zero dependencies and no DOM manipulation beyond the target code blocks.

Self-Hosting & Configuration

• Install via npm: npm install highlight.js
• Import only needed languages to reduce bundle size with highlight.js/lib/core
• Register individual languages with hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
• Choose a theme by importing the corresponding CSS file from highlight.js/styles/
• Use hljs.configure({ ignoreUnescapedHTML: true }) to suppress warnings for raw HTML

Key Features

• Zero-config: add the script and call hljs.highlightAll() — it just works
• Language auto-detection scores multiple grammars and picks the best match
• Tree-shakeable: import only the languages you need to keep bundles small
• Works with static HTML, Markdown renderers, and server-side rendering
• Accessible: generated markup uses semantic <span> elements and CSS classes

Comparison with Similar Tools

• Prism.js — requires explicit language class names; Highlight.js auto-detects by default
• Shiki — uses TextMate grammars and VS Code themes for higher accuracy; heavier runtime
• CodeMirror — full code editor, not just a highlighter; much larger in scope
• Rouge — Ruby-based server-side highlighter; Highlight.js runs in both browser and Node.js

FAQ

Q: How does auto-detection work? A: Highlight.js runs the code through every registered language grammar, scores each result by the number of matched tokens and relevance, and picks the highest-scoring language.

Q: Can I reduce bundle size? A: Yes. Import highlight.js/lib/core and register only the languages you need instead of the full package.

Q: Does it modify my HTML outside code blocks? A: No. It only touches <pre><code> elements and adds <span> tags inside them.

Q: Can I add a language not included by default? A: Yes. Write a grammar definition object and register it with hljs.registerLanguage().

Sources

• https://github.com/highlightjs/highlight.js
• https://highlightjs.org/