Webでソースコードをハイライトする

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スクリプトはパターンマッチングによる簡単な方法で構文にマッチさせているため、厳密に構文解析を行っていません。コードの断片に適用することができますが、厳密ではないので、ときどきですが構文解析に失敗します。

参考