Dave Rupert's MicroLighter は、2.05 KB のコアを使用して DOM に手を加えないようにしています。

Why it matters

MicroLighter shows what becomes possible when a browser API crosses the support threshold: a familiar developer tool can shrink to a 2.05 KB core and stop rewriting page markup.

Dave Rupertは、開発者がドキュメントをトークン単位の span 要素で埋め尽くすことなくコードに色付けできるブラウザの機能を中心に構築された、依存関係ゼロの構文ハイライターであるMicroLighterを紹介した。

このオープンソースプロジェクトは、Rupert自身の Jekyll ブログでの小さな失敗から生まれた。構文ハイライトが壊れてしまい、Highlight.js、PrismJS、Rouge、Shiki といった、彼がこれまで使ってきたツールの中から改めて選ぶことを迫られた。代わりに Rupert は修復作業を利用して、どれだけの処理をブラウザ自身に任せられるかを試した。

これは Rupert にとって馴染みのある領域だ。彼は 2007 年に Trent Walton と Reagan Ray とともにオースティンのウェブデザイン会社 Paravel を立ち上げ、ニッチなウェブツールを多数リリースしてきた。彼のプロジェクト履歴には FitText、FitVids、Lettering.js、アクセシビリティに焦点を当てた A11Y Project などが含まれる。2024 年 5 月、Rupert は Fluent デザインシステム向けの web components に取り組むために Microsoft に参加した。

MicroLighter は同じ「小さなツール」志向に従っている。プロジェクトのホームページによれば、コアの圧縮バンドルは 2.05 KB で、MIT ライセンスのリポジトリ にはランタイム依存関係が記載されていない。Rupert はコードブロックの言語を推測し、対応する grammar を読み込み、トークンにハイライトを適用するようにこれを構築した。行番号、コピーコントロール、その他のインターフェイス機能は別のカスタム要素に置かれている。

ブラウザにトークンの描画を任せる

従来の構文ハイライターは、コードサンプルの一部に要素やクラスを追加してトークンを表現することが一般的だ。MicroLighter はコードのマークアップをそのまま保持する。テキストをスキャンしてコメント、文字列、関数、キーワードなどのカテゴリの範囲を作成し、それらの範囲を CSS.highlights.set() を通じて登録する。

CSS は ::highlight(keyword) のようなセレクタを通じて表示を処理する。これにより、Rupert が避けたかった入れ子になったトークンマークアップからコードが解放される。

タイミングはブラウザのサポートによるものだ。CSS Custom Highlight API は、主要ブラウザで利用可能になった 2025 年 6 月以降、MDN の Baseline 2025 指定に到達した。そのサポートにより、開発者はページの DOM 構造を変更することなく任意のテキスト範囲をスタイリングするための実用的なプラットフォーム原始機能を得た。古いブラウザは依然として互換性の制約となり得る。

MicroLighter は API のスタイリング上の制限も受け継ぐ。Rupert によればカスタムハイライトはイタリック体、太字、フォントの変更を適用できない。これはトレードオフを生む：よりクリーンなマークアップとより小さなコアの代わりに、HTML ベースのレンダラーが提供できるほどのタイポグラフィ制御はできない。

Rupert はその制約を受け入れている。なぜなら彼の対象は意図的に「普通」だからだ。彼のブログ記事は HTML、CSS、JavaScript、Bash、Ruby、Markdown を混在させることがあり、各コードサンプルはしばしば 15 行前後だ。彼はすべてのページであらゆるパーサを配信することなく、幅広い言語対応を必要としていた。

フル前払いなしでの TextMate カバレッジ

MicroLighter は VS Code やその他のエディタで使われる確立された言語定義である TextMate grammars を利用している。プロジェクトはウェブ言語、システム言語、アプリケーション言語、スクリプト言語、データおよび設定フォーマットをサポートしており、JavaScript、TypeScript、Python、Rust、Go、SQL、GraphQL、Dockerfile、Git diff などが含まれる。

各 grammar はそれ自体がモジュールとして出荷され、その言語がページで使用されるときにのみロードされる。「That way you only pay for what you use（そうすることで、使用する分だけ支払えばよい）」と Rupert はローンチ投稿に書いた。

この条件付けは 2.05 KB という見出し数値にとって重要だ。それは圧縮されたコアを表すもので、ページの総転送量は MicroLighter が必要な grammar を取得するにつれて増加する。プロジェクトは Rupert が挙げる既存のハイライターに対する独立した速度や精度の比較を公開していない。その主張はベンチマークの勝利よりも、アーキテクチャとバンドルの規律に基づいている。

Rupert はまた、TextMate の詳細なスコープをテーマを書く人向けのより小さなカテゴリセットに圧縮した：コメント、キーワード、関数、文字列、定数、プロパティ、タグ、セレクタ、挿入、削除。テーマ作者は 2 つの別々のテーマファイルを維持する代わりに、CSS の light-dark() を使ってライトとダークの色を一緒に定義できる。

中核の仕事は一つ、付随機能は別途

Rupert の最も優れたプロダクト判断は、MicroLighter にやらせないことを決めることだった。「I wanted the syntax highlighter to do one job: infer language and highlight code in that language（構文ハイライターには一つの仕事だけをさせたかった：言語を推測してその言語でコードにハイライトを付けること）」と彼は書いた。

行番号やコピー用ボタンが必要な開発者は、Rupert がその付属機能で約 1 KB を追加すると見積もる<micro-lighter> カスタム要素を追加できる。Shadow DOM によりこれらのコントロールはコードコンテンツから分離され、提供されたインターフェイスが制限的すぎる場合は開発者がベースクラスを拡張できる。

パッケージは自己初期化バンドル、highlightAll() を持つ ESM インターフェイス、オプションのカスタム要素をサポートしている。インストールは npm install microlighter で行う。

MicroLighter は意図的に控えめなリリースだ：自身のブログを直し、最近幅広く使えるようになったブラウザ API を見つけ、その結果を同じ不満を持つ誰にでも使えるようにパッケージ化した開発者の作品である。Rupert はキャリアの多くをそうした不満を小さな公開ツールに変えることに費やしてきた。このツールは、開発者がブラウザのルール内で我慢できるなら、モダンなブラウザが生成されたマークアップのもう一層を置き換えられるという単純な賭けをしている。