davatron5000/microlighter

これは何？

主な機能

• 01圧縮時のサイズは約2 KiBで、実行時の依存関係なし
• 02トークン用のspan要素をDOMに挿入せずにコードをハイライト
• 03TextMateの文法を使い、37言語をオンデマンドで読み込み
• 04CSSカスタムプロパティで設定できる10種類のテーマを同梱
• 05プログラム、オート実行、Webコンポーネントの各APIを提供
• 06ハイライトしたコードブロックをプレーンテキストとして編集可能

ユースケース

• ドキュメントサイトやブログに軽量な構文ハイライトを追加する
• 編集可能なWebコンポーネントやブラウザー内コードエディターでコードをハイライトする
• Shikiのような大きな依存関係を追加せずにハイライトを導入したいプロジェクト

クイックスタート

1. 1

   パッケージをインストールする

   npm install microlighter
2. 2

   テーマをインポートし、JavaScriptでハイライターを実行する

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

使う前に知っておきたいこと

• !言語の対応範囲と文法の精度は、Shikiなどの大規模なツールより限定的です。
• !CSS Custom Highlight APIを使用するため、ブラウザーがこれに対応している必要があります。

トピック

よくある質問

microlighter とは？

各トークンをspan要素で囲まず、CSS Custom Highlight APIを使って構文をハイライトする、依存関係のないJavaScriptライブラリ。 MicroLighterは、Webページ向けの軽量な構文ハイライターです。TextMateの文法を読み込み、ブラウザーのCSS Custom Highlight APIで色を適用するため、コードブロック内にトークン用のspanを挿入せず、マークアップをすっきり保てます。圧縮時のサイズは約2 KiBで、実行時の依存関係はありません。

microlighter は無料で使えますか？ライセンスは？

microlighter は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

microlighter は今もメンテナンスされていますか？

半年以内に更新あり。microlighter の最終コミットは 2026年9月11日 です。

microlighter は何に使えますか？

ドキュメントサイトやブログに軽量な構文ハイライトを追加する 編集可能なWebコンポーネントやブラウザー内コードエディターでコードをハイライトする Shikiのような大きな依存関係を追加せずにハイライトを導入したいプロジェクト

microlighter のインストール方法は？

パッケージをインストールする: npm install microlighter テーマをインポートし、JavaScriptでハイライターを実行する: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

microlighter はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/davatron5000/microlighter