超軽量であらゆる言語に対応!Webページ上のコードを読みやすくするスクリプト -microlight.js

通常のシンタックス ハイライトだと、言語ごとのルールを記述したファイルが必要ですが、ハイライトさせる箇所を最低限必要な箇所に絞ることで、超軽量化(2.2k minified)させたスクリプトを紹介します。

ページで見せるのであれば、充分ですね。

サイトのキャプチャ

microlight.js
microlight.js -GitHub

microlight.jsのデモ

microlight.jsのサポートブラウザはIE9+をはじめ、メジャーブラウザの最新版です。

サポートブラウザ一覧

サポートブラウザ一覧

デモではシンタックス ハイライトがブルー系にスタイルされています。

デモのキャプチャ

デモページ

下部にあるように、カラーを変更することもできます。

microlight.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: CSS

コードの文字のスタイルを定義します。
font-familyは「monospace」にすることを忘れないでください。

Step 3: HTML

コードをdiv要素で囲い、「class=microlight」を与えます。

オプション

文字のカラーや背景のカラーはCSSで簡単に設定できます。

リアルタイムにその場で変更させる時は、下記のスクリプトを加えます。

top of page

©2017 coliss