microlighter
A zero-dep syntax highlighter that uses the CSS Highlights API
What is it?
What it is
A tiny, dependency-free syntax highlighter for the web (~2 KiB compressed) that uses the CSS Custom Highlight API and TextMate grammars to highlight code without injecting <span> tags around tokens.
Why it exists
Traditional syntax highlighters pollute the DOM with markup around every token, making code blocks hard to edit and inflating page weight. MicroLighter leverages the browser's native CSS Custom Highlight API to style token ranges directly via ::highlight(), keeping markup clean and editable while remaining extremely lightweight.
Who should use it
Front-end developers, technical writers, and documentation creators who need a lightweight, dependency-free syntax highlighter with clean DOM output and editable code support. Ideal for projects wanting to use the CSS Custom Highlight API, with small bundle size and on-demand language loading.
Who should avoid it
Developers requiring extensive language support beyond 35 supported grammars, high precision syntax accuracy (e.g., Shiki-level grammar coverage), or span-based token markup for granular styling. Also unsuitable for those needing out-of-the-box framework integrations without custom setup.
Stars over time
No change stars in the last 1 day
How it works
A quick walkthrough in plain English
How microlighter works
Step 1 of 3
You interact with it
Open microlighter, send a request, or connect it to your stack.
Features
Advantages
- Tiny footprint (~2 KiB compressed)
- No runtime dependencies
- Clean DOM preserves editability of code
- On-demand language loading reduces initial load
- Multiple API styles (programmatic, automatic, web component)
- Leverages standard CSS Custom Highlight API
- Dependency-free and lightweight
- Supports editable code blocks out of the box
Disadvantages
- Less language coverage and grammar accuracy than larger tools
- Relies on browser's RegExp rather than Oniguruma/WebAssembly
- Trade-off between size and feature completeness
- May not handle all complex languages or edge cases
Installation
cloud
Use the auto runner from a CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/microlighter@2/themes/github.css"><script type="module" src="https://cdn.jsdelivr.net/npm/microlighter@2/microlighter.min.js"></script>
native
npm install microlighter
FAQ
How do I install MicroLighter?
Run `npm install microlighter` in your project, or include the CDN script and stylesheet as shown in the README.
How can I automatically highlight code on page load?
Import a theme stylesheet, load the auto‑runner script, set `data-syntax-theme` on `<body>` (or a container), then the library highlights all `<pre><code>` blocks automatically.
What language aliases are supported out of the box?
Aliases include `js`/`jsx` → `javascript`, `ts` → `typescript`, `sh`/`shell` → `bash`, `yml` → `yaml`, `md` → `markdown`, `sass` → `scss`, `docker` → `dockerfile`, `py` → `python`, `rb` → `ruby`, `gql` → `graphql`, and others listed in the README.
How do I add a custom language alias?
Pass a `languageAliases` object to `highlightAll()` (e.g., `{ ecmascript: 'javascript' }`) or use the same map when calling the auto runner.
Can I keep code blocks editable while using MicroLighter?
Yes. Set `contentEditable="plaintext-only"` on the `<code>` element, disable spellcheck, and after each change dispatch a `syntax-highlight` event so MicroLighter re‑highlights the updated code.
Featured in Videos
YouTube tutorials and walkthroughs for microlighter
Alternatives
Similar projects ranked by category, topics, and text overlap.