MOONGIFTさんのサイトでGoogle Code Prettifyが紹介されていました。


ソースコードの色づけを行う「Google Code Prettify」


google-code-prettify1

私のサイトではsyntaxhighlighterを使っているのですが、ちょっと気になったので使ってみました。


以下使い方です。

まずは、google-code-prettifyからソースをダウンロードしてきます。
google-code-prettify


ここでは、圧縮されて軽いほうをダウンロードしてきました。
ソースの中身を見たい人は圧縮されていないほう（上のリンク）からダウンロードしてきましょう。



使い方は非常に簡単ですね。
まず、cssとjavascriptをインクルードします。


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



次に<body>タグにonload属性を付与します。

<body onload="prettyPrint()">



最後に色付けするコードを以下のように<pre>タグでくくります。

<pre class="prettyprint lang-使用する言語">
   ここにコードを記載
</pre>


これだけで、色付けが出来ます。「使用する言語」の部分は言語によって変えてください。
色付けに対応している言語はBash、C、C++、CS、HTML、Java、JavaScript、XML、Perl、Python、Ruby、PHP、CSS、SQL、VB等との記載がありました。


ただし、コードの中を見てみると色付けの仕方が非常に適当ですね。
きちんと対応しているのは以下の言語だけのようです。
  • CSS
  • Haskell
  • Lisp
  • LUA
  • SML
  • Protocol
  • SQL
  • Visual Basic
  • WikiText

それ以外の言語に関してはfunctionで色付けしたり”"を文字列として色付けしたりとかなりアバウトにやっているようです。
これならsyntaxhighlighterのほうがいいと思います。

ただし、複数言語が混じっても色付けしてくるようなので、そういう場合はGoogle Code Prettifyという選択肢もいいのではないでしょうか？


非常に簡単に出来ますので、一度お試しあれ！


簡単に色付けを行う - Google Code Prettify