しらいとブログ

ネットで検索してもなかなか出てこないIT情報を独自にまとめています

SyntaxHighlighterの高速化

技術系のブログなどでコードの色分けにSyntaxHighlighterを使っている人は多いと思います。しかしながらSyntaxHighlighterには問題があります。SyntaxHighlighterはページ内に出てくる画像など全ての読み込みが終わるまで色分けしないのです。これでは読めるようになるまでに無駄に時間がかかります。

解決方法は2つあります。

  1. autoloaderを使う
  2. all関数の代わりにhighlight関数を使う
1. autoloaderを使う

SyntaxHighlighterのバージョン3系にはautoloaderが付属しています。このautoloaderは色分けに必要なスクリプトを自動で判断して読み込みます。そして、画像などの読み込みが終わっていなくても、必要なスクリプトが全て読み込まれたタイミングで処理が行われます。結果的に通常よりも早く処理が行われます。

2. all関数の代わりにhighlight関数を使う

SyntaxHighlighterの実行は、バージョン2系も3系も次のようにall関数を呼ぶことで行われます。

<script>
SyntaxHighlighter.all();
</script>

この関数は次のように定義されています。

src/shCore.js (3.0.83)

	all: function(params)
	{
		attachEvent(
			window,
			'load',
			function() { sh.highlight(params); }
		);
	}

src/shCore.js (2.1.382)

	all : function(params)
	{
		sh.utils.addEvent(
			window,
			'load',
			function() { sh.highlight(params); }
		);
	}

どちらもwindowloadイベントのリスナーでhighlight関数を呼ぶ仕様になっています。引数をall関数に渡していたら、そのままhighlight関数に渡されます。それ以外に処理はありません。

windowloadイベントはページ内の画像などが全て読み込み終わった時に実施されるため実行が遅くなります。そこで、自分で直接highlight関数を呼ぶことにします。highlight関数は次のようにして呼ぶことが出来ます。

<script>
SyntaxHighlighter.highlight();
</script>

つまり、SyntaxHighlighter.all();の代わりにSyntaxHighlighter.highlight();を使うだけで高速化出来るということです。

注意点として、highlight関数は色分けするコードより後ろで呼ぶ必要があります。highlight関数より後ろに出てきたコードは色分けされません。ページの最後で呼ぶのが確実です。

心配ならhighlight関数とall関数の両方を呼んでも大丈夫です。highlight関数を呼んだ時とページ内の画像等が全て読み込まれた時の2回色分けが行われることになりますが、1回目の色分けでpreタグがdivタグに置き換えられるので、既に色分けが終わったコードは2回目ではスルーされます。

あるいはdomreadyやjQueryのreadyなど別のライブラリを使って適切なタイミングでhighlight関数を呼ぶのも手でしょう。

また、autoloaderを使っている場合は必要なスクリプトが読み込まれる前にhighlight関数を呼んでしまうことが無いよう注意が必要です。