Prettifyスクリプトを使うことで、ウェブページのソースコードを構文を色分け表示することができます。コードを色分けすることでコードを読みやすく理解しやすくなります。
使い方
以下のようにpre要素に “prettyprint” クラス指定をするとキーワードや文字列、コメントなどが色分けされます。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
<pre class="prettyprint">
/**
* say hello.
*/
function foo() {
for (var i = 0; i<10; i++) {
console.log('Hello');
}
}
</pre>
言語の識別
Prittify はソースコードの言語が何であるのかを適切に自動的に判断しようとしますが、C と HTML およびそれをベースとした言語に最適化されています。その他の言語については、言語ヒントを設定することで最適化されるように特別なハンドラーを用意が用意されています。
言語のヒントは lang-言語 の書式のクラスをpre タグに 追加します。
<pre class="prettyprint lang-javascript">
/**
* say hello.
*/
function foo() {
for (var i = 0; i<10; i++) {
console.log('Hello');
}
}
</pre>
行番号の表示
linenums クラスを指定するとソースコードの行番行を表示します。
/**
* say hello.
*/
function foo() {
for (var i = 0; i<10; i++) {
console.log('Hello');
}
}
任意の行番号から開始させたいときはlinenums:numにします。
/**
* say hello.
*/
function foo() {
for (var i = 0; i<10; i++) {
console.log('Hello');
}
}
制限
Prettifyスクリプトはパターンマッチングによる簡単な方法で構文にマッチさせているため、厳密に構文解析を行っていません。コードの断片に適用することができますが、厳密ではないので、ときどきですが構文解析に失敗します。
参考