サイト構築作業再開中です! 今日から何回かにわたって、今時なサイト制作技術について紹介したいと思います。(周回遅れなのもあるかも
まず第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>
オプションで拡張言語とスキンを設定できます。
拡張言語はCSS、SQL、Lisp(Scheme)などに対応するもので、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内の「<」「>」は、「<」「>」に直しておいてください。
言語は自動で判別されますが、念のため手動で指定した方が紛れがなくて安心です。(CSSなどの拡張言語では必須!)
<pre class="prettyprint lang-css">〜</pre>
lang-xxxのxxx部分は、Cならc、C++ならcpp、 C#ならcs、 Javaならjava、JavaScriptなら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