# Highlight.js — Automatic Syntax Highlighting for the Web

> Highlight.js is a syntax highlighter written in JavaScript that works in the browser and on the server, with automatic language detection and support for nearly 200 languages.

## Install

Save in your project root:

# Highlight.js — Automatic Syntax Highlighting for the Web

## Quick Use
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
```

## 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/


---
Source: https://tokrepo.com/en/workflows/asset-501470c6
Author: AI Open Source