[Web] ブログに掲載するソースコードに色付けして見栄えを良くする方法

こんにちは@yoheiMuneです。
今日は、ブログに掲載するソースコードを簡単に色付けして見栄えを良くする方法を書きたいと思います
JavaScript + CSSで色づけを行う方法です。このブログでも利用しています(⌒▽⌒)

ソースコードの色づけができるライブラリを使いました

今回利用しようと検討したのが、以下の2つでした。

■google-code-prettify(URL:http://code.google.com/p/google-code-prettify/)


■Highlight.js(URL:http://softwaremaniacs.org/soft/highlight/en/)


今回は、google-code-prettifyにしました。Google Codeで管理されている点がいいなぁと。深い理由は無いです。

google-code-prettifyの使い方

使い方は簡単です。まずは、JavaScriptファイルと、CSSファイルをダウンロードしてきます。 特に改修するつもりが無いなら、smallというファイルサイズを小さくしてあるものをダウンロードすれば良いかと思います。
http://code.google.com/p/google-code-prettify/downloads/list

その後、ダウンロードしたCSSとJavaScriptファイルを任意のディレクトリに置いて、HTMLではそれを参照するようなインポート文を書きます。

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

続いて、ハイライトしたい箇所をpreタグで囲って、クラス属性にprettyprintを指定します。

<pre class="prettyprint">
  <div id="mapArea" style="width:500px; height:300px;"></div>
  <script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false">
  <script>
    var tokyo = new google.maps.LatLng(35.681382,139.766084);
    var myOptions = {
      zoom: 8,
      center: tokyo,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapArea"), myOptions);
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
  </script>
</pre>

最後に、色づけを行うJavaScript関数(=prettyPrint())をonloadイベントの時に呼び出します。

window.onload = prettyPrint;

これだけで、ソースコードに色づけが出来ます。

その他に

・色づけの色をカスタマイズしたい場合には、CSSを編集すると良いようです。コメントも記載されているので、編集個所が分かりやすくて良いです(*´∇｀*)

・行数も表示出来るようです。

・詳しい情報は、http://google-code-prettify.googlecode.com/svn/trunk/README.htmlを参照下さい。

最後に

ブログにソースコードを掲載する事が多いので、ソースコードに色づけを行うJavaScriptを作ろうかと思っていましたが、 世の中には既に便利なものがありますね(*´∇｀*)こーゆうものは活用させて頂かなくては☆
何かIssueを見つけたら報告しよっと。
また便利Goodsを見つけたらブログにも書きたいと思います。