注目★★★★★Lobsters
MicroLighter：2KB の軽量シンタックスハイライター、CSS Highlights API で DOM 操作ゼロ
30秒で把握
- 1MicroLighter：依存ゼロ・2KB サイズ・CSS Highlights API で DOM 操作を回避した軽量シンタックスハイライター
- 2Textmate 言語文法を活用・言語ごと遅延ロード・light-dark() で統一テーマ対応により柔軟性と効率化を実現
- 3npm インストール可能・ESM 版と Web Component 版が提供され、小規模ブログから複雑サイトまで段階的に利用可能
要約
Dave Rupert が CSS Custom Highlights API を用いた軽量シンタックスハイライター MicroLighter を開発した。依存ライブラリなし・minified+gzipped で約 2KB・Textmate の言語文法を活用し、言語は遅延ロードで必要な分だけ読み込む。DOM 操作を避け CSS ::highlight() で強調表示し、行番号やコピー機能など拡張機能は別途 Web Component で提供する仕組みで、シンプルで拡張性の高い設計を実現した。
あなたへの影響
バニラ JavaScript で複数言語のシンタックスハイライトが必要なブロガーや小規模サイト運営者にとって、依存ライブラリ最小化と読み込み最適化が実現でき、Textmate 文法の再利用により言語対応の保守負荷も削減される。
推奨：Web Component による機能拡張の設計も参考になる。