超軽量であらゆる言語に対応！Webページ上のコードを読みやすくするスクリプト -microlight.js
Post on:2016年6月2日
sponsors
通常のシンタックス ハイライトだと、言語ごとのルールを記述したファイルが必要ですが、ハイライトさせる箇所を最低限必要な箇所に絞ることで、超軽量化(2.2k minified)させたスクリプトを紹介します。
ページで見せるのであれば、充分ですね。
microlight.js
microlight.js -GitHub
microlight.jsのデモ
microlight.jsのサポートブラウザはIE9+をはじめ、メジャーブラウザの最新版です。
サポートブラウザ一覧
デモではシンタックス ハイライトがブルー系にスタイルされています。
下部にあるように、カラーを変更することもできます。
microlight.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <script src="path/to/microlight.js"></script> </head> |
Step 2: CSS
コードの文字のスタイルを定義します。
font-familyは「monospace」にすることを忘れないでください。
|
1 2 3 4 |
.microlight { font-family : monospace; white-space : pre; } |
Step 3: HTML
コードをdiv要素で囲い、「class=microlight」を与えます。
|
1 2 3 4 |
<div class=microlight>for (var i = 0; i<=10; i++) { // say hello echo("hello"); }</div> |
オプション
文字のカラーや背景のカラーはCSSで簡単に設定できます。
|
1 2 3 4 5 6 |
.microlight { font-family : monospace; white-space : pre; background-color : #C4E4E8; color : #052C36; } |
リアルタイムにその場で変更させる時は、下記のスクリプトを加えます。
|
1 |
microlight.reset(); |
sponsors
