A lightweight, modular, dependency-free syntax highlighting system for HTML <pre><code> blocks.
- ✅ Pure vanilla JavaScript + CSS
- ✅ Multi-language support
- ✅ Extensible grammar registry (
registerLanguage) - ✅ Safe HTML escaping (XSS-aware output)
- ✅ Light + dark themes
- ✅ Optional line numbers
- ✅ Optional copy-to-clipboard button
- ✅ Graceful fallback for unknown languages
-
Detects language via class name:
<pre><code class="language-javascript">...</code></pre>
-
Highlights semantic token types:
keywordstringcommentnumberfunctionoperatorpunctuation
-
Highlights all supported code blocks on
DOMContentLoaded. -
Single DOM rewrite per block for performance.
- HTML
- CSS
- JavaScript
- JSON
- Python
- C
- C++
- Bash
- x86/x64 Assembly
- ARM Assembly
language-c++→cpplanguage-cxx/language-cc→cpplanguage-x64asm/language-asm→x86asmlanguage-arm→armasm
No package manager required.
- Copy these files into your project:
highlighter.jshighlighter.css
- Include them in your HTML:
<link rel="stylesheet" href="./highlighter.css" />
<script src="./highlighter.js"></script><pre data-line-numbers data-copy>
<code class="language-javascript">
const greet = (name) => {
console.log(`Hello, ${name}`);
};
</code>
</pre>Optional global configuration:
<script>
SimpleHighlighter.configure({
lineNumbers: true,
copyButton: true
});
</script>Per-block toggles are also supported:
data-line-numbersdata-copy
The core engine is language-agnostic.
To add a language, register a grammar object only.
SimpleHighlighter.registerLanguage("ini", {
tokens: [
{ type: "comment", pattern: /[;#][^\n]*/ },
{ type: "keyword", pattern: /\[[^\]\n]+\]/ },
{ type: "function", pattern: /^[A-Za-z0-9_.-]+(?=\s*=)/m },
{ type: "operator", pattern: /=/ },
{ type: "string", pattern: /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'/ },
{ type: "number", pattern: /\b\d+(?:\.\d+)?\b/ },
{ type: "punctuation", pattern: /[[\]]/ }
]
});The default theme is light.
Enable dark mode by adding .theme-dark to <body>:
<body class="theme-dark">