google-code-prettifyでソースをハイライトする方法

仕事柄、分からない事があるとすぐにネットで調べるんですが、そうした時に公開されているソースに色が付いているブログをよく見かけます。あれ綺麗で見やすいので実装したいなーと思ったので、調べてみたところ、

という便利なものがありました。

まずは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タグを使うと自動的にハイライトされるようになりました。

アーカイブ