A lightweight, efficient syntax highlighting library with zero runtime dependencies. Supports both CommonJS and ES Modules, perfect for both browser and Node.js environments.
- 🚀 Zero runtime dependencies
- 📦 Tiny bundle size
- 🎨 Multiple themes (Light, Dark, Nord, GitHub)
- 🔧 First-class TypeScript support
- 🌐 Universal compatibility (Browser, Node.js)
- ⚡ Fast tokenization using optimized RegExp patterns
- 🎯 Support for 7 popular languages with comprehensive test coverage
The code bundle size is very small - if you took a screenshot of this page, the screenshot would likely be many times larger than the bundle!
npm install best-highlightTo use the library in a browser environment:
- Include the library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/browser/index.global.js"></script>- Use the global
bestHighlightfunction to highlight code:
bestHighlight.highlight(
'function hello() {\n console.log("Hello, World!");\n}',
"javascript"
);- Write your own styles or use the provided themes:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/themes/light.css"
/>Example:
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/themes/light.css"
/>
<script src="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/browser/index.global.js"></script>
</head>
<body>
<pre data-language="javascript" id="code">
function hello() {
console.log("Hello, World!");
}
</pre>
<script>
document.addEventListener("DOMContentLoaded", () => {
bestHighlight.highlightElement(document.getElementById("code"));
});
</script>
</body>
</html>import { highlight } from "best-highlight";
const code = `function hello() {
console.log("Hello, World!");
}`;
const html = highlight(code, "javascript");import { highlightElement } from "best-highlight";
// Highlight a pre element
const element = document.querySelector("pre");
element.setAttribute("data-language", "javascript");
highlightElement(element);The library provides robust support for 7 programming languages:
- JavaScript (keywords, operators, strings, comments)
- TypeScript (with identifier preservation)
- Python (keywords, functions, strings, comments)
- HTML (tags, attributes, strings, comments, doctypes, entities)
- CSS (selectors, properties, values, punctuation)
- JSON (strings, numbers, punctuation)
- Markdown (headings, emphasis)
Four built-in themes are available:
- Light (default)
- Dark
- Nord
- GitHub
Each theme is available as a separate CSS file in the themes directory:
/* Choose one of: */
import 'best-highlight/themes/light.css'
import 'best-highlight/themes/dark.css'
import 'best-highlight/themes/nord.css'
import 'best-highlight/themes/github.css'Highlights code and returns HTML string with appropriate class names. Each token is wrapped in a span with classes bh-npm-token and bh-npm-{type}.
Highlights code within a DOM element. The element should have a data-language attribute specifying the language. Adds the bh-npm-highlight class to the element.
Low-level API that returns an array of tokens for custom processing. Each token has:
type: string (e.g., 'keyword', 'string', 'comment')content: string (the actual token content)
The library includes comprehensive test coverage for all supported languages and features:
- Language-specific tokenization tests
- HTML generation and escaping
- DOM element highlighting
- Theme application
- Edge cases (empty content, unknown languages)
Run tests with:
npm testContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
# Install dependencies
npm install
# Run tests
npm testMIT