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

Go Yoshiwara

Go Yoshiwara

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

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

参考サイト

この記事のシェア数

2

Go Yoshiwara
Go Yoshiwara 代表取締役会長 / 吉原 ゴウ

1982年生まれ。信濃中学校卒業。フリーターとして23歳まで様々な職業に従事し数々のスキルを身につける。ウェブデザイナーとして活躍したのち、25歳で起業し代表取締役に就任。自然あふれる場所で生まれ、アウトドアスポーツをして育ったが故にITの道を志したが、近年、再びアウトドアな環境、遊び、生き方を模索して長野県に移住。わくわくするものをつくり続けていたい。

自己紹介をもっと見る