Repolode
Submit
davatron5000

davatron5000/microlighter

A dependency-free JavaScript syntax highlighter that uses the CSS Custom Highlight API instead of wrapping every token in span elements.

View on GitHubWebsite
Stars
1,055
Forks
33
Open issues
22
Last commit
last month

What is it?

MicroLighter is a small syntax highlighter for web pages. It reads TextMate grammars and applies colors through the browser's CSS Custom Highlight API, so code blocks keep clean markup with no token spans inside them. The library is about 2 KiB compressed and has no runtime dependencies.

It includes 37 languages that load on demand and 10 bundled themes controlled by CSS custom properties. It can be used through a programmatic `highlightAll()` function, an auto-run script that responds to a `syntax-highlight` event, a CDN link, or an optional `<micro-lighter>` web component that adds copy buttons and line numbers.

The tokenizer uses the browser's native RegExp rather than Oniguruma or WebAssembly. This keeps the bundle small, at the cost of less language coverage and grammar accuracy than larger tools such as Shiki.

Key features

  • 01Roughly 2 KiB compressed with no runtime dependencies
  • 02Highlights code without inserting token span elements into the DOM
  • 03Supports 37 languages loaded on demand from TextMate grammars
  • 04Ships 10 themes configured through CSS custom properties
  • 05Offers programmatic, automatic, and web component APIs
  • 06Keeps highlighted code blocks editable as plain text

Use cases

  • Adding lightweight syntax highlighting to a documentation site or blog
  • Highlighting code in an editable web component or in-browser code editor
  • Projects that want highlighting without a large dependency such as Shiki

Quick start

  1. 1

    Install the package

    npm install microlighter
  2. 2

    Import a theme and run the highlighter in your JavaScript

    import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

Things to know

  • Language coverage and grammar accuracy are narrower than larger tools such as Shiki.
  • Uses the CSS Custom Highlight API, so the browser must support it.

Topics

#syntax-highlighting#css-highlight-api#textmate-grammar#javascript#web-components#frontend-library#css#css-highlight#css3#syntax

FAQ

What is microlighter?
A dependency-free JavaScript syntax highlighter that uses the CSS Custom Highlight API instead of wrapping every token in span elements. MicroLighter is a small syntax highlighter for web pages. It reads TextMate grammars and applies colors through the browser's CSS Custom Highlight API, so code blocks keep clean markup with no token spans inside them. The library is about 2 KiB compressed and has no runtime dependencies.
Is microlighter free to use? What license does it have?
microlighter is open source under the MIT license. Check the license terms before using it in commercial products.
Is microlighter still maintained?
Updated within 6 months. The last commit to microlighter was on Sep 11, 2026.
What can I use microlighter for?
Adding lightweight syntax highlighting to a documentation site or blog Highlighting code in an editable web component or in-browser code editor Projects that want highlighting without a large dependency such as Shiki
How do I install microlighter?
Install the package: npm install microlighter Import a theme and run the highlighter in your JavaScript: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();
Where can I get microlighter?
The source code and installation instructions are on GitHub: https://github.com/davatron5000/microlighter

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects