google-code-prettify

(posted at: 2014-06-10)

ウェブページのソースコードにスタイル適用させる google-code-prettify のWikiの私的翻訳。ご参照される場合、当方はその内容については一切の責任を負いません。責任の範囲については terms of use をご参照ください。

原文:https://code.google.com/p/google-code-prettify/wiki/GettingStarted

はじめに

Prettify(以降、当スクリプトのことをPrettifyと記述) スクリプトを使うことで、ウェブページのソースコードをハイライト表示させることができます。

コードのスニペットごとにスタイルを適用して表示することで、コードの境界がわかりやすくなり、要旨の理解がしやすくなります。わずらわしいページ全体の構文解析をかわりに行ってくれるわけです。

コードの書き方

以下のように<pre>や<code>あるいは<xmp>要素に "prettyprint" クラス指定をすると、

<pre class="prettyprint">
source code here
</pre>

キーワードや文字列、コメントなどのコードごとに<span>指定をして色をつけてくれます。

Markdown や HTML 生成ソフトを使っている場合は、Prittify はクラス指定を行なわないので、以下のように記述するとうまくいくかも知れません。

<?prettify?>
<pre class="prettyprint">
code here
</pre>

読み込ませ方

Prittyfy の JavaScript と CSS を読み込ませには、1 つの URL を指定するだけ。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Prittyfy の全システムと実行スケジュールを呼び出しています。
さまざまなオプションによって、(たとえばCGIの引数のように)“ランナー設定”を特定することもできます。

CGI パラメーター default 意味
autoload=(true | false) true ページが読み込まれた際、自動的に Prittyfy を実行する
lang=... none 言語ハンドラーを読み込ませます。たいていはソースファイルへの、各言語用の拡張ファイルとして提供されています。index of language handlers. を参照。複数を呼び出した場合(?lang=css&lang=ml)すべて読み込まれます。
skin=... none skin gallery を参照。複数を呼び出した場合、最初に読み込みに成功したものが適用されます。
callback=js_ident Prittifyが終了したときに window.exports["js_ident"] が呼び出されます。複数回定義すれば、その分だけ呼び出されます。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script>

上の例は、言語拡張として CSS、スキンパラメーターとして "sunburst" スキンを読み込んでいます。

独自の JS & CSS の組み込み

スクリプトとスタイルシートをダウンロードしてカスタマイズした場合、両者を読み込ませるのを忘れないでください。

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

そして、ページが読み込まれた後に、prettyPrint 関数が実行されるようにしてください。1つの方法としては、onLoad ハンドラーを経由して以下のようにします。

<body onload="prettyPrint()">

スタイルの定義

Prittyfiy は、クラス指定しかしませんので、特定の色づけやフォント指定は、スタイルシートによってそれぞれ行う必要があります。

もっとも手っ取り早い方法は、style gallery のなかから一つ選択して、それを微調整して独自のスタイルシートとして使用することです。

言語ヒント

Prittify はソースコードの言語が何であるのかを適切に判断できるように、最大限の努力を払ってつくられていますが、C と HTML およびそれをベースとした言語に最適化されています。その他の言語については、言語ヒントを設定することで最適化されるように特別なハンドラーを用意しています。

<pre class="prettyprint lang-scm">(friends 'of '(parentheses))</pre>

上の例は、コードが構造化コードであることを定義するために lang-scm 指定をしています。

<?prettify lang=scm?>
<pre>(friends 'of '(parentheses))</pre>

としても、動作します

行番号の採番

Linenums クラスは、

<pre class="prettyprint linenums">
Many
lines
of
code
</pre>

を指定すると、ソースコードの各行に ol 要素と li 要素を挿入して、行番行を表示してくれます。

たいていのスタイルシートでは、5行ごとに行番号を表示するよう設定されていますが、大きなファイルで40行ごとに表示させたい場合には、行数を指定してあげます。

<?prettify linenums=40?>
<pre>lots of code</pre>

としても動作します。