Tag Archives: GeSHi

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

ソースコードが下の例のように綺麗にハイライト表示されているサイトを見たことがあるのではないかと思う。 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での表示。 行番号は非表示に出来る。(バージョン2も。) 一行が長すぎる場合は、自動的にスクロールバーが表示される。 表示部をダブルクリックすると、コピーモードのになるので、ソースをコピー出来る。 続いて、こちらがバージョン2での表示となる。バージョン2の方が、ハイライト表示までのタイムラグが少ないように思う。タイムラグについては、プラグインの実装方法によっても異なり、一概に言えなさそうである。 バージョン2では、長い行の折り返しが可能な他、Flashベースのツールバーが表示できる。 このツールバーでは、ソースのコピー機能などが提供されている。 基本的にバージョン3の方が操作性に優れていると思うが、ソースのコピー方法などは、バージョン2の方が直感的に分かり易く、ビジターに親切かと思われる。 上記の表示は、シンプルに見えるが、デフォルトのテーマでの表示例だ。 複数のテーマが用意されているので、テーマを切り替えることによってデザインを変えることが出来る。 もっとも、テーマ自体は「SyntaxHighlighter」ライブラリに含まれているので、これは「SyntaxHighlighter」ライブラリベースのプラグインに共通の機能である。 設定画面は充実しており、日本語表示にも対応している。 この設定画面で、かなり細かい設定変更が行える。 「SyntaxHighlighter」ライブラリでは、ハイライト表示の指定は、<pre>タグでマークアップして行うのが基本だが、このプラグインでは、[php]といった様な簡略化されたショートコードを採用している。 ・Syntax Highlighter for WordPress 「Syntax Highlighter for WordPress 3.0.83.2」も、「SyntaxHighlighter」ライブラリベースで、バージョン3.0系と2.0系の2つのライブラリが組み込まれている。 開発者は、日本人の方。 こちらがバージョン3での表示。 こちらがバージョン2での表示となる。 「SyntaxHighlighter」ベースなら基本的に表示は同じ。微妙な差は、初期設定値の違いによるものだ。 設定画面は非常にシンプルで、バージョンとテーマの切り替えのみ。 「SyntaxHighlighter Evolved」同様に、ソースコードのマークアップにショートコードを使う。 設定画面がシンプルな事を除けば、基本的に 「SyntaxHighlighter Evolved」と大差はない。 ・CodeColorer 「CodeColorer 0.9.9」は、「GeSHi」ライブラリをベースとしている。 そのため、ハイライト表示に切り替わるまでのタイムラグはない。 表示は下記の通り。「preg_replace」がリンクされているが、クリックすると、関数のリファレンスに飛ぶ。 複数のテーマが用意されているので、テーマの切り替えで、レイアウトを変えることが出来る。 … 続きを読む →

Posted in WordPress, ネット・PC | Tagged , , , , , | 2 Comments