JavaScript2008/01/17ゴウ
仕事柄、分からない事があるとすぐにネットで調べるんですが、そうした時に公開されているソースに色が付いているブログをよく見かけます。あれ綺麗で見やすいので実装したいなーと思ったので、調べてみたところ、
という便利なものがありました。
まずはgoogle-code-prettifyから必要なファイルをダウンロードしてきます。
解凍すると、prettify.jsとprettify.cssのふたつが入手できます。
jsファイルはハイライトさせる為の本体。CSSファイルは、ハイライトの色を指定してあります。
まずはheader内にて、jsとCSSファイルを読み込みます。パスは動作環境によって変えてください。
そしたら、bodyでonloadしてあげます。
次に、ハイライトしたいタグ（preやcode）にclassをふります。
これで、ハイライトされます。
ハイライトの色ですが、白背景が前提になっているようだったので、このサイトで使用するにあたり、CSSを修正しています。
上記の方法だと、作りたてのサイトの場合はいいですが、すでにエントリーが多数あるような場合に適用するのが大変です。というか、記事を書くたびにclassを指定するのも結構かったるいです。なので、preタグが使われたら、自動的にclassが振られるように改造してみました。
上記のソースをprettify.jsに追加して、bodyでonloadしてあげます。
prettyPrint()よりも先に呼ばないとうまく動かないので注意。
これで、preタグを使うと自動的にハイライトされるようになりました。