MicroLighter：CSS Custom Highlights API を使った軽量シンタックスハイライター
Introducing MicroLighter
Dave Rupert氏は、CSS Custom Highlights APIを利用したクライアントサイドのシンタックスハイライター「MicroLighter」を公開しました。依存関係ゼロ、gzip後約2KB、Textmateの言語グラマーを活用し、言語ごとにオンデマンドで読み込むのが特徴です。従来のspanタグによるDOM操作を避け、CSSの::highlight疑似要素でトークンをハイライトします。また、ライト/ダークテーマをlight-dark()で統合し、行番号などの追加機能はカスタム要素に分離しています。
CSSの::highlight()疑似要素には制限があります。イタリック、太字、フォントの切り替えはできませんが、それ以外は、spanをあちこちに注入する代わりにCSSで「このトークンをハイライトしたい」と慣用的に表現できる、かなりクールな構文です。
HNでの議論
15- piratebroadcast
失礼なことを言うつもりはないし、感謝していないわけでもないんだけど、サイト自体にデモがないのはちょっと変だと思うんだ。自分のサイトに実装するためのサンプルコードはあるけど、サイト自体にはハイライト機能がなかったり、テキストをハイライトしても何か変わったことが起こらなかったりするんだよね。もしかしたら俺だけかもしれないし、何か見逃しているのかもしれないけど。コードを自分のサイトにインストールする前に、何をするものなのか例を見たいんだ。
- xigoi
本当にすごい！CSS Highlight APIが色を変えるだけで、フォントを変えられないのは残念だね。
- relativeadv
デイブが今も自分のことをやっているのを見るのはいいね。