Last updated
How Syntax Highlighting Works
Syntax highlighting tokenizes source code and applies different colors to different token types: keywords, strings, comments, numbers, operators, and identifiers. The tokenizer uses either regular expressions (fast, approximate) or a full parser (accurate, slower). Libraries like Prism.js and highlight.js use regex-based tokenizers that work well for most languages.
Popular Syntax Highlighting Libraries
| Library | Size | Languages | Best For |
|---|---|---|---|
| Prism.js | ~6KB core | 290+ | Websites, docs |
| highlight.js | ~50KB | 190+ | Auto-detection |
| Shiki | ~1MB | 100+ | VS Code themes, SSG |
| CodeMirror | ~100KB | 100+ | Code editors |
| Monaco Editor | ~5MB | 80+ | Full IDE experience |
Using Prism.js
HTML
<!-- Include Prism CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<!-- Markup: language class on code element -->
<pre th:inline="none">
def fibonacci(n):
a, b = 0, 1
for _ in range(n):
yield a
a, b = b, a + b