【ハウツー】
統合開発環境や高機能エディタでは、編集するソースコードやテキストファイルの種類に応じてテキストがハイライト表示されることが多い。ハイライト表示はきれいで見やすくなるし、コーディング上の問題を発見しやすくなるという実用上の利点もある。
となるとWebで掲載するソースコードも、ぜひともハイライト表示させたいところだ。Web掲載するソースコードやテキストのハイライト表示化の方法はいくつもあるが、ここではGoogleで公開されている「google-code-prettify」を紹介したい。
google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述されたソースコードをシンタックスハイライト化する機能を提供する。なんといっても導入が簡単なところがポイントが高い。
google-code-prettifyの導入は非常に簡単だ。とりあえずgoogle-code-prettifyのサイトから成果物をダウンロードしておく。JavaScriptファイルとCSSファイルがそれぞれ1つづつだ。
まず、シンタックスハイライトしたいHTML文書のヘッダにリスト1を追加する。script要素とlink要素で指定するファイルはそれぞれパスが通ったところに書き換えるように。
次にbody要素にonload="prettyPrint()"属性を追加する。これによってgoogle-code-prettifyを使ったシンタックスハイライト処理が実施させるようになる。
そしてシンタックスハイライトさせたいソースコードを「<pre class="prettyprint"><pre>」要素の中にコピーすればよい。
あとはページが読み込まれるときにgoogle-code-prettifyが実行され、表示されるソースコードのシンタックスハイライトが実施されるという寸法だ。ソースコード部分が書き変わるわけではないので、HTMLのソースコードを表示させてpre要素に書き込まれているソースコードをそのままコピーして使うことができる。掲載も簡単、コピーして使うのも簡単だ。
| Twitter、サイト作成用フレームワーク「Bootstrap 2.0」を公開 [16:55 2/7] |
| ネットワールド、業界初のディスクレスVDIを発表 [15:12 2/7] |
| ラリタン、1台で8サーバにノンブロッキングアクセス可能なKVMスイッチ [12:45 2/7] |
| ST、SD 3.0規格に準拠する電圧レベル・トランスレータを発表 [11:28 2/7] |
| Microchipなど、chipKIT向けIDE対応のCerebot Development Boardを発表 [11:01 2/7] |
|
TVアニメ『聖闘士星矢Ω』、4月放送開始! 新作CG映画はさとうけいいち監督 [17:39 2/7] ホビー |
|
ニコン、42倍ズームレンズ搭載機など「COOLPIX P」シリーズ2モデルを発表 [17:38 2/7] 家電 |
|
第117回 まもなく40歳。キャリアは一貫しているもののなかなか次の仕事が見つかりません [17:07 2/7] キャリア |
|
あの腕章やメガネがモチーフに - ペルソナシリーズのシルバーアクセサリー [17:00 2/7] ホビー |
|
卵を割って中身を捨てた……。疲れているなぁと思うエピソード集 [17:00 2/7] キャリア |