1000本突破
1000本突破

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

ゴウ

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

google-code-prettify

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

実装方法

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

参考サイト