仕事柄、分からない事があるとすぐにネットで調べるんですが、そうした時に公開されているソースに色が付いているブログをよく見かけます。あれ綺麗で見やすいので実装したいなーと思ったので、調べてみたところ、
という便利なものがありました。
実装方法
まずはgoogle-code-prettifyから必要なファイルをダウンロードしてきます。
解凍すると、prettify.jsとprettify.cssのふたつが入手できます。
jsファイルはハイライトさせる為の本体。CSSファイルは、ハイライトの色を指定してあります。
まずはheader内にて、jsとCSSファイルを読み込みます。パスは動作環境によって変えてください。
<tt><script src="src/prettify.js" type="text/javascript"></script>
<link href="src/prettify.css" rel="stylesheet" type="text/css"/></tt>そしたら、bodyでonloadしてあげます。
<body onload="prettyPrint()">次に、ハイライトしたいタグ（preやcode）にclassをふります。
<tt><pre class="prettyprint">ここにハイライトしたいソース</pre></tt>これで、ハイライトされます。
ハイライトの色ですが、白背景が前提になっているようだったので、このサイトで使用するにあたり、CSSを修正しています。
いちいちclassを指定するのが面倒なので改造してみた
上記の方法だと、作りたてのサイトの場合はいいですが、すでにエントリーが多数あるような場合に適用するのが大変です。というか、記事を書くたびにclassを指定するのも結構かったるいです。なので、preタグが使われたら、自動的にclassが振られるように改造してみました。
function changePre(){
var code = document.getElementsByTagName("pre");
if (code.length) {
for (var i = 0; i < code.length; i++) {
code[i].className = "p2";
}
}
}上記のソースをprettify.jsに追加して、bodyでonloadしてあげます。
<body onload="changePre();prettyPrint()">prettyPrint()よりも先に呼ばないとうまく動かないので注意。
これで、preタグを使うと自動的にハイライトされるようになりました。
参考サイト
- ハイライトもGoogle流 – “google-code-prettify”でソースコードに色付けを
- ソースコードを色分けする google-code-prettify を過去記事を書き換えないで導入する方法
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
