ぎるばーとのノート

もっともっと遠くへ行きたい 空が広く見える場所まで

google-code-prettify

 サイト構築作業再開中です! 今日から何回かにわたって、今時なサイト制作技術について紹介したいと思います。(周回遅れなのもあるかも

 まず第1回は、google-code-prettifyの紹介〜。
 これは、プログラムのソースコードなどを文法に基づいて見やすくハイライト(色づけ)してくれるものです。
 見本はこんな感じになります。

 配布元(公式サイト)はこちら。
google-code-prettify
 ダウンロードせずにCDNから直接読み込んで使うこともできます。自分でスタイルシートをいじったりしない場合に簡単。
 ダウンロードして使う場合は、Downloadsページから。

CDNから使う場合

 HTMLのhead内でrun_prettify.jsを読み込みます。

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

 オプションで拡張言語とスキンを設定できます。
 拡張言語はCSSSQLLispScheme)などに対応するもので、run_prettify.jsの後ろに「?lang=css」のように書き足します。拡張言語の一覧はtrunk/src
 スキンはtrunk/stylesにあるスタイル(見本ページ)を、「?skin=sunburst」のように指定します。何も指定しないとDefaultになります。
 両方とも設定する場合は、「?lang=css&skin=sunburst」のように。

ダウンロードして使う場合

 HTMLのhead内でprettify.cssとprettify.js、必要に応じて拡張言語用のスクリプトを読み込みます。

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

 さらに、bodyの読み込み完了のタイミングでprettyPrint()を呼び出し。

<body onload="prettyPrint()">

 と、読み込みはこれにて完了!

マークアップ

 HTML内でハイライトしたいpreブロックに「prettyprint」クラスを指定します。

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

 pre内の「<」「>」は、「&lt;」「&gt;」に直しておいてください。
 言語は自動で判別されますが、念のため手動で指定した方が紛れがなくて安心です。(CSSなどの拡張言語では必須!)

<pre class="prettyprint lang-css"></pre>

 lang-xxxのxxx部分は、Cならc、C++ならcpp、 C#ならcs、 JavaならjavaJavaScriptならjs、Rubyならrb、HTMLならhtml、XMLならxmlなど。拡張言語は各スクリプトファイルを参照。

 さらに、「linenums」クラスを追加して行番号をつけることができます。先頭行の番号を1以外から始めるオプションもあります。

<pre class="prettyprint linenums"></pre>
<pre class="prettyprint linenums:10"></pre>
付け足し

 下のリンクのサイトから専用のスタイルシートがダウンロードできます。
Color themes for Google Code Prettify