ソースコードを綺麗に表示するプラグイン

ソースコードを綺麗に表示するプラグインソースコードが下の例のように綺麗にハイライト表示されているサイトを見たことがあるのではないかと思う。

function add_attrib($content){//Add attribute
	global $id, $attribute, $attribute_value, $prefix, $suffix;
	$attrib = "$attribute=\"$attribute_value$gallery\"";
		if ($id == null) {
			$gallery = "";
		} else {
			$gallery = $prefix.$id.$suffix;
		}
	return preg_replace("/<a(?![^>]*?rel=['\"].*)[^>]*?(href=['\"][^'\"] ?\/[^\/] ?\.(bmp|gif|jpg|jpeg|png)['\"])(?![^>]*?rel=['\"].*)[^\>]*>(<img[^>]*?title=(['\"][^'\"] ?['\"])[^>]*\/>)/i", "<a $1 $attrib title=$4>$3", $content);
}

実は、上記のようにソースコードをハイライト表示させる事は、それ程、難しい事ではない。

ソースコードのハイライト表示を実現するライブラリがいくつか公開されているので、それらを使えば良い。

これらのライブラリの中でも「SyntaxHighlighter」、「GeSHi」の2つが有名である。

WordPressの場合は、それらのライブラリをプラグイン化したものが公開されているので、導入は非常に簡単だ。

1.主なライブラリ

・SyntaxHighlighter

SyntaxHighlighter」は、Javaスクリプトで記述されたライブラリで、サーバーではなく、クライアント(ブラウザ)側で処理させてハイライト表示を実現している。

そのためサーバーへの余計な負荷はない。

欠点は、ハイライト表示されるまでタイムラグが生じることだ。

サーバー側の処理に割り込んでいるわけではないので、最初は、記事として記述したとおりに表示される。つまりハイライト表示ではない。

読み込みが完了し、ブラウザでの処理が完了して、初めてハイライト表示になる。

そのため、長い短いは別として、普通に表示される不恰好な時間が必ず生まれる。

「SyntaxHighlighter」は、ページが本文表示された後に読み込まれなければ、正しく本文のハイライト表示を処理できないため、これもタイムラグの一因となっている。

実際に「SyntaxHighlighter」ベースのプラグインを試したところ、このブログは、様々なJavaスクリプトを読み込んでいるため、更に遅延が生じだ。

これは極端な例だが、このブログを参照したときに実行されるスクリプトの1つが、ツイッターの情報にアクセスしているため、中国の自宅からアクセスした場合、中国からはツイッターには接続できないためタイムアウトするまで待つことになり、タイムアウト後にようやく「SyntaxHighlighter」が実行され、もはやタイムラグとは呼び難い程の酷い遅延となった。

環境によっては予想外の遅延が生じる可能性があることに注意して置かなければならない。

「SyntaxHighlighter」の実行部分は、本文の後ろかつ、他のスクリプトより上位の位置で読まれたほうが、如何なる環境でもストレスが少ないと思われる。しかし、遅延の問題は完全には避けられないだろう。

ちなみに上の例も「SyntaxHighlighter」を使用しているが、プラグインは自作した。多少タイムラグが軽減できたように思う。

2011/5/3 「WP SyntaxHighlighter」を公開。

・GeSHi

GeSHi」は、PHPで記述されたライブラリで、「SyntaxHighlighter」とは異なり、サーバ側で実行される。

そのため「SyntaxHighlighter」のようなタイムラグはなく、いきなりハイライトされた形で表示される。

私のサーバー環境では、サーバーへの負荷によって、ページの表示に遅延が生じるなどのストレスも感じられなかった。

ベージ上で呼び出すだけで動作し、予めハイライト表示用のCSSが用意されてる「SyntaxHighlighter」と比較すると、ややページへの実装が面倒な印象がある。

2.WordPressへの実装

「SyntaxHighlighter」や「GeSHi」をベースとしたプラグインが公開されているので、それらを使えば簡単に導入が可能である。

主なプラグインを紹介する。

・SyntaxHighlighter Evolved

SyntaxHighlighter Evolved 3.1.1」は、「SyntaxHighlighter」ライブラリを利用したプラグインで、バージョン3.0系と2.0系の2つのライブラリが組み込まれており、切り替えて使用出来る。

こちらは、バージョン3での表示。

SyntaxHighlighter Evolved V3での表示

行番号は非表示に出来る。(バージョン2も。)

一行が長すぎる場合は、自動的にスクロールバーが表示される。

表示部をダブルクリックすると、コピーモードのになるので、ソースをコピー出来る。

続いて、こちらがバージョン2での表示となる。バージョン2の方が、ハイライト表示までのタイムラグが少ないように思う。タイムラグについては、プラグインの実装方法によっても異なり、一概に言えなさそうである。

SyntaxHighlighter Evolved V2での表示

バージョン2では、長い行の折り返しが可能な他、Flashベースのツールバーが表示できる。

このツールバーでは、ソースのコピー機能などが提供されている。

基本的にバージョン3の方が操作性に優れていると思うが、ソースのコピー方法などは、バージョン2の方が直感的に分かり易く、ビジターに親切かと思われる。

上記の表示は、シンプルに見えるが、デフォルトのテーマでの表示例だ。

複数のテーマが用意されているので、テーマを切り替えることによってデザインを変えることが出来る。

もっとも、テーマ自体は「SyntaxHighlighter」ライブラリに含まれているので、これは「SyntaxHighlighter」ライブラリベースのプラグインに共通の機能である。

SyntaxHighlighter Evolved 設定画面

設定画面は充実しており、日本語表示にも対応している。

この設定画面で、かなり細かい設定変更が行える。

「SyntaxHighlighter」ライブラリでは、ハイライト表示の指定は、<pre>タグでマークアップして行うのが基本だが、このプラグインでは、[php]といった様な簡略化されたショートコードを採用している。

・Syntax Highlighter for WordPress

Syntax Highlighter for WordPress 3.0.83.2」も、「SyntaxHighlighter」ライブラリベースで、バージョン3.0系と2.0系の2つのライブラリが組み込まれている。

開発者は、日本人の方

こちらがバージョン3での表示。

Syntax Highlighter for WordPress V3での表示

こちらがバージョン2での表示となる。

Syntax Highlighter for WordPress V2での表示

「SyntaxHighlighter」ベースなら基本的に表示は同じ。微妙な差は、初期設定値の違いによるものだ。

設定画面は非常にシンプルで、バージョンとテーマの切り替えのみ。

Syntax Highlighter for WordPress 設定画面

「SyntaxHighlighter Evolved」同様に、ソースコードのマークアップにショートコードを使う。

設定画面がシンプルな事を除けば、基本的に 「SyntaxHighlighter Evolved」と大差はない。

・CodeColorer

CodeColorer 0.9.9」は、「GeSHi」ライブラリをベースとしている。

そのため、ハイライト表示に切り替わるまでのタイムラグはない。

表示は下記の通り。「preg_replace」がリンクされているが、クリックすると、関数のリファレンスに飛ぶ。

CodeColorer

複数のテーマが用意されているので、テーマの切り替えで、レイアウトを変えることが出来る。

「GeSHi」ライブラリに不足している機能とも言えるテーマの切り替えを独自に実装した点は、非常に評価できるのだが、レイアウトにテーブルを使っているのが難点で、私の環境では、行番号を表示するとレイアウトが崩れた。

設定画面は、日本語表示も可能で、項目が充実しているので、細かな設定が出来る。

CodeColorer 設定画面

横幅などのサイズを指定出来る点も使い勝手が良い。

ハイライト表示の指定は、<code>タグまたはショートコードを使って行うが、「CodeColorer TinyMCE Button」をインストールすれば、ビジュアルエディタから簡単に入力できる。

・WP-Syntax

WP-Syntax 0.9.9」も「GeSHi」ライブラリをベースとしているが、「CodeColorer」と異なり、「単にライブラリを実装しました。」とった印象のシンプルなものだ。

従って、表示もシンプルで、テーマの切り替え機能はない。

WP-Syntax

加えて、設定画面も用意されていない。

ハイライト表示の指定は<pre>タグで行い、ショートコードは用意されていない。

しかし「WP-Syntax Button」を併用すれば、<pre>タグの入力も苦にならない筈だ。

シンプルとは言え、必要な機能は備わっているので、シンプルなもので構わないという方にはオススメだ。

3.利用上の注意

この手のプラグインを使用した場合、ソースコードは、HTMLエディター上で入力しないといけないという認識が一部にあるが、少なくともWordPress 3.1.2上では、ビジュアルエディターから入力しても問題はない。

むしろ、HTMLエディター上でエスケープせずに入力する方が危険である。HTMLエディターを使用するなら、ソースコードをエスケープし、実体参照に変換しなければならない。

参考:HTMLタグ変換ツール

エスケープせず、かつショートコードを使うなどして下手にHTMLエディターからソースコードを入力するとハイライト表示のプラグインを無効化した時に、コードが表示されるのではなく、コードが実行されても不思議ではない。

例えば、下記をHTMLエディターからそのまま入力し、ハイライト表示のプラグインを無効化するとどうなるだろうか?

[javascript]
<script type="text/javascript">
<!--
document.write("Hello World!!");
// -->
</script>
[/javascript]

正解は、ソースコードが実行され、このようになる。

[javascript]
Hello World!!
[/javascript]

とは言え、ビジュアルエディターからソースコードを入力する場合にも致命的な問題点はある。

個人的にも、投稿の作成にはビジュアルエディターを使っているので、コードのハイライトもビジュアルエディター上で完結できると有り難いと思い、テストしてみたが、<pre>や<code>タグを使えば、ソースコードは、勝手にエスケープされ、実体参照に変換されるので、この点は問題ない。

かつ、一旦、実体参照に変換されれば、投稿作成中にビジュアルエディターとHTMLエディターの間を行ったり来たりしても問題は起こらない。

タグではなく、ショートコードの利用が可能なプラグインも多いが、同様に実体参照に変換する機能を持つ場合が多い。

ショートコードは、ビジュアルエディター上でも簡単に入力出来るので便利かもしれないが、ハイライト表示のプラグインを使わなくなった時の事も考えて、タグを使用した方が良いように思う。

タグを使っていれば、プラグインを無効にしても、それなりに表示はされる。

さて、個人的には、「ビジュアルエディター上で、タグを使用して」という方向で結論が出たが、ここで一番の大きな問題にブツかる。

ビジュアルエディター上で、どのようにして<pre>や<code>を入力するかという問題である。

この記事を書いてる時点においては、このブログでは「SyntaxHighlighter」を使用しているが、タイムラグの問題から、既存のプラグインではなく、自作のものを使っている。

自作のプラグインでは、技術力の関係でショートコードは使えないため、ビジュアルエディター上では、完全に入力に困ってしまう。

そこで、ビジュアルエディターに、<pre>タグを挿入出来るボタンを追加するプラグインを作成した。

  1. ソースコードをそのまま入力。
  2. ソースコードを選択、反転表示。
  3. ボタンをクリックして、リストから言語を選び、挿入をクリック。

と言った簡単な手順で入力できるので、ショートコードと遜色はない。

これで問題は解決した。

このプラグインは、体裁が整い次第、公開したいと考えている。

2011/5/1 「SyntaxHighlighter TinyMCE Button」を公開。



WordPress, ネット・PC, , , , , Permalink