PDF形式で記事をダウンロードする
私も「SyntaxHighlighter」ライブラリを使って、ソースコードの強調表示を行うのプラグインを作成しているが、今回は「SyntaxHighlighter」ライブラリについての技術情報の簡単なまとめとライバル？との機能比較を兼ねた「SyntaxHighlighter」ベースのWordPress用プラグインの比較をしてみる。
「SyntaxHighlighter」という言葉は、単にソースコードの強調表示を行う機能やアプリを指す場合も多いが、この記事で言うところの「SyntaxHighlighter」とは、Alex Gorbatchev氏がJavaスクリプトで記述して公開している強調表示用のライブラリを指す。
Alex Gorbatchev氏のSyntaxHighlighter
「SyntaxHighlighter」ライブラリの利点は、Javaスクリプトで記述されている点にある。
そのため多少のカスタマイズが可能なサイトであれば、比較的、簡単に導入できる。
しかし、Javaスクリプトであるが故にブラウザの種類、バージョン、設定によっては、上手く強調表示されない可能性がある。
また、サーバーから送信されるソース自体が強調表示されているわけではなく、ソースを受け取ったブラウザがJavaスクリプトで処理し、強調表示に変える仕組みであるため、ブラウザ上で強調表示になるまでにタイムラグが生まれる場合もある。
WordPress用のプラグインでは、「GeSHi」ライブラリをベースとしたプラグインも人気が高いが、こちらはPHPで記述されているため、（CSSの解釈は別として）ブラウザによる違いやタイムラグは起こり得ない。
「GeSHi」の場合は、PHPで記述されたサイトでなければ導入できないが、そのような制限がない「SyntaxHighlighter」の利点は大きい。
しかしながら、PHPで記述されたWordPressの場合、むしろ「GeSHi」の利点の恩恵の方が大きいと言えるかもしれない。
ちなみに私は、ソースコードの強調表示用プラグインを色々と試した結果、既存のプラグインで気に入ったものが見つからなかったため自作する道を選んだが、「GeSHi」ではなく「SyntaxHighlighter」をベースにした理由は、CSSにある。
「SyntaxHighlighter」に同梱されているCSSは、十分に使い物になると思われたが、「GeSHi」の場合は、CSSを自分で作り込む必要があり、その手間を敬遠したためである。
１．SyntaxHighlighterの導入
「SyntaxHighlighter」の導入は比較的簡単である。
「3.0.x」の場合は、ダウンロードファイル内の「scripts」と「styles」フォルダをサーバーにアップロードし、<head>・・・</head>の間に、以下のような記述を追加すれば良い。
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript" src="scripts/shAutoloader.js"></script>
<script type="text/javascript">//<![CDATA[
SyntaxHighlighter.autoloader(
"applescript scripts/shBrushAppleScript.js"
,"as3 actionscript3 scripts/shBrushAS3.js"
,"bash shell scripts/shBrushBash.js"
,"cf coldfusion scripts/shBrushColdFusion.js"
,"cpp c scripts/shBrushCpp.js"
,"c# c-sharp csharp scripts/shBrushCSharp.js"
,"css scripts/shBrushCss.js"
,"delphi pas pascal scripts/shBrushDelphi.js"
,"diff patch scripts/shBrushDiff.js"
,"erl erlang scripts/shBrushErlang.js"
,"groovy scripts/shBrushGroovy.js"
,"java scripts/shBrushJava.js"
,"jfx javafx scripts/shBrushJavaFX.js"
,"js jscript javascript scripts/shBrushJScript.js"
,"perl pl scripts/shBrushPerl.js"
,"php scripts/shBrushPhp.js"
,"plain text scripts/shBrushPlain.js"
,"ps powershell scripts/shBrushPowerShell.js"
,"py python scripts/shBrushPython.js"
,"rails ror ruby rb scripts/shBrushRuby.js"
,"sass scss scripts/shBrushSass.js"
,"scala scripts/shBrushScala.js"
,"sql scripts/shBrushSql.js"
,"vb vbnet scripts/shBrushVb.js"
,"xml xhtml xslt html scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
//]]></script>
パスは自身の環境に合わせて書き換えること。9行目から33行目のうち、不要な言語は削除しても良い。
また、2行目と3行目で読み込まれるCSSを変えることで、テーマ（デザイン）が変わる。
上記は、必要なBrushファイルのみを読み込む「Dynamic Brush Loading」を利用した場合の記述だが、5行目のように「XML」用のBrushファイルのみを静的に読み込んでおく点がキモで、これを忘れると「html-script」が機能しない。
「Dynamic Brush Loading」を使用しないなら、6行目と8行目から34行目までを省き、代わりに
<script type="text/javascript" src="scripts/shBrushAppleScript.js"></script> <script type="text/javascript" src="scripts/shBrushAS3.js"></script> . . . <script type="text/javascript" src="scripts/shBrushXml.js"></script>
と言った具合の記述を5行目付近に追加し、必要な言語のBrushファイルを読み込んでも良い。
この記述なら2.x系のライブラリにも通用する。
上記はシンプルな記述例で、実際には様々なオプションも指定できる。
上手くいかない場合は、7行目から36行目を、本文の後、つまり、ページのフッター付近に記述しても良い。
WordPressに導入する場合は、エディタからソースコードを入力する際に様々な問題が生じるため、これらを補完する機能を持つプラグインを利用したほうが手っ取り早い。
２．ソースコードの書き方
強調表示させたいソースコードは、決まった書式で書く必要がある。
「SyntaxHighlighter」では、<pre>タグを使ってソースコードをマークアップする方法と<script>タグを使う方法が用意されているが、ソースコードのマークアップには<pre>タグを使うべきだろう。
下記のような特殊なclass属性を持つ<pre>タグでソースコードをマークアップする。
<pre class="brush: php">エスケープされたコード</pre> <pre class="brush: c; gutter: false">エスケープされたコード</pre> <pre class="brush: xhtml; highlight: [1, 3]">エスケープされたコード</pre>
ソースコードはエスケープする必要がある。解説では「<」のみエスケープすれば良いことになっているが、「>、＆、”、’」もエスケープした方が良い。
言語の指定には「Brush alias」を使うこと。加えて様々なオプションを同時に指定する事が出来る。
以下、「<pre>タグでソースコードをマークアップする」などの表現が出た場合は、上記の構文を指す。
なお、この構文は、あくまで「SyntaxHighlighter」ライブラリのルールであり、プラグインに組み込まれた場合は、プラグイン独自のソースコードの記述方法を用意している場合があるので、プラグインの説明をよく読むこと。
３．SyntaxHighlighterベースのプラグイン
WordPressでは、数多くの「SyntaxHighlighter」ベースのプラグインが公開されている。
大きく分類すると、「SyntaxHighlighter」ライブラリ本来の記述方法である、<pre>タグを使ってソースコードをマークアップする方法を採用しているプラグインとショートコードを使ってマークアップするプラグインに分かれる。
ショートコード自体には基準があるわけではなく、同様のプラグイン同士でも互換性がない場合が多い。そのため別のプラグインへの乗り換えが難しくなる。
対して<pre>タグを使うタイプ同士なら、簡単に乗り換えが可能である。
ここでは、最近のダウンロード数を比較し、比較的ダウンロード数の多いプラグインのみを取り上げて比較する。
圧倒的な人気を誇るプラグインで、「WordPess.COM」でも採用されている。
WordPressでは、ソースコードの強調表示プラグインの定番とも言える存在である。
現時点での最新版は、バージョン3.1.3。
このプラグインは「SyntaxHighlighter 3.0.83」と「SyntaxHighlighter 2.1.364」の両方のライブラリを備え、好みに合わせて設定画面で切り替えて使うことが出来る。
また、記事内だけでなく、コメントやウィジェットに書かれたソースコードのハイライトにも対応している。
日本語表示にも対応した設定画面では、テーマによるデザイン変更や行番号の表示、折り畳み表示、ツールバーのON/OFFなど、非常に細かな設定が可能で、同系統のプラグインの中でも設定の充実度は１、２争うものであろう。
ソースコードの有無と言語の種類を判断にする機能を備え、必要なページでのみ、必要なJavaスクリプトとCSSが読み込まれる。
ただし、この仕組みのせいで、「HTML valid」になっていないと言う欠点がある。
私が公開しているプラグインで指摘された事があるが、「HTML valid」か否かを気にかける人は多いようなので、気にするなら使用は避けた方が良い。
CSSは、Javaスクリプトを介して読み込まれる仕組みで、これにより、Javaスクリプトのみならず、CSSも必要とするページでのみ読み込まれる仕組みを実現している。
HTMLソースへのコードの書き出しに無駄がなく、このあたりは本当に良く出来ている。
ソースコードの記述には、以下のようなショートコードを使用する。
[php]ソースコード[/php] [C gutter="false"]ソースコード[/C] [XHTML highlight="3,5"]ソースコード[/XHTML] [code lang="c" gutter="false"]ソースコード[/code] [source lang="php" toolbar="false"]ソースコード[/source] [sourcecode lang="xhtml" highlight="3,5"]ソースコード[/sourcecode]
ビジュアルエディター上から入力すれば、自動的にエスケープされるので、ソースコードをエスケープする必要はない。またHTMLエディターに切り替えたり、HTMLエディター上で保存してもソースコードが破壊されることはない。
ただし、ビジュアルエディターにソースコードをペーストすると、タブによるインデントが解除されてしまう。
それを考慮してソースコードに対しては、タブでインデント出来るようになってはいるが、これはこれで手間である。
この問題は、HTMLエディターなら解消できる。
HTMLエディターでソースコードをペーストすれば、タブによるインデントは維持されたままになる。また、HTMLエディター上でもソースコードをエスケープせずに、同様に方法でソースコードを記述できる。
見た目にエスケープされるわけではないが、表示される際のソースはエスケープされたものになっているので問題ない。
ただし、HTMLエディターからビジュアルエディターに切り替えると、ソースコードが破壊されてしまう。
ビジュアルエディターでもHTMLエディターでも全く同じやり方でソースコードの入力は出来るが、その処理は同列ではないため、ビジュアルエディターとHTMLエディターの両方を使うようなユーザーには向いていないと言えるかもしれない。
このプラグインは、「SyntaxHighlighter」ベースではあるが、<pre>タグでの記述はサポートしておらず、基本的には、ショートコードを使った記述のみとなるが、設定画面で「すべてのブラシを読み込む」を有効にした場合に限り、<pre>タグでの記述をサポートする。
「SyntaxHighlighter Evolved」は、言語を追加する仕組みを備えているため、Brushファイルさえあれば、必要な言語を追加できる。追加の言語は、プラグインとしても公開されているので、探してみると良いだろう。
・Syntax Highlighter for WordPress
「Syntax Highlighter for WordPress」は、をかもと氏が開発した人気の高いプラグインで、現時点での最新版は、バージョン3.0.83.3である。
「SyntaxHighlighter Evolved」同様に「SyntaxHighlighter 3.0.83」と「SyntaxHighlighter 2.1.364」の両方のライブラリを備え、好みに合わせて設定画面で切り替えて使うことが出来る。
設定画面はシンプルで、項目は、ライブラリの切り替えとテーマの切り替えのみである。勿論、日本語表示にも対応している。
ソースコードの有無と言語の種類を判断にする機能を備え、必要なページでのみ、必要なJavaスクリプトが読み込まれる。
この自動処理は、厳密にはCSSまでは及んでいなが、ショートコードが記述されていない記事では、CSSを読み込まないシンプルな処理がされており、ソースへ無駄なコードの書き出しを抑えている。
結果としてソースに書きだされるコードは、至ってシンプルである。
シンプルながら基本的な設定は網羅しているので、多くのコードを追加するプラグインが嫌いなら、このプラグインが向いているだろう。
このプラグインもソースコードの記述は、ショートコードを使って行う。
[php]ソースコード[/php] [C gutter="false"]ソースコード[/C] [XHTML highlight_lines="1,2,3"]ソースコード[/XHTML]
「SyntaxHighlighter Evolved」と似た記述ではあるが互換性はない。
ビジュアルエディター、HTMLエディターのどちらからでも、ソースコードを入力できるが、「SyntaxHighlighter Evolved」と全く同じ問題も抱えており、両方を使い分けるようなユーザーには向いていないかもしれない。
「SyntaxHighlighter」ベースではあるが、<pre>タグでの記述はサポートしていないので、ショートコードを使った記述のみとなる。
如何にも本家っぽい名称なので勘違いされている方もおられるようだが、私が作成したプラグインで、この中では一番の後発で、本家でも老舗でもないプラグインである。
現時点の最新版は、バージョン1.4.3.1。
ビジュアルエディターで必要な作業が完結できること、HTMLエディターに切り替えても問題ないこと、「SyntaxHighlighter Evolved」並の機能の実装が目標であり、コンセプトであるが、一応は達成できたと考えている。
「SyntaxHighlighter 3.0.83」と「SyntaxHighlighter 2.1.382」の２つのライブラリを備え、好みに合わせて設定画面で切り替えて使うことが出来る。
記事だけでなく、コメントのソースコードも強調表示できる。
設定画面では、かなり細かな設定が出来るように配慮している。
ソースコードの有無までは判断しており、必要なページでのみJavaスクリプトが読み込まれるように配慮しているが、言語の種類までは判断していない。
そのため「3.0.83」使用時は、「Dynamic Brush Loading」の働きで必要なBrushファイルのみが読み込まれるものの、「2.1.382」使用時には、全てのBrushファイルを読み込む仕様になっている。
また、これらの処理はCSSまでは及んでいない。
これらを補完する機能として、強調表示の対象とするページの選択と言語のON/OFF機能を備えており、これらを上手く使えば、ソースへの無駄なコードの書き出しを抑え、加えて、書き出されるコード自体を短く出来る。
ソースコードの記述は、ビジュアルエディターから行うことを想定しており、ビジュアルエディターには２つのボタンが追加される。
２つのボタンを使って、ビジュアルエディター上で、ソースコードの記述からオプションの変更まで行えるようになっている。
「SyntaxHighlighter TinyMCE Button」をインストールして、もっと高機能なボタンを利用することも出来る。
ただし、ボタンは、標準のビジュアルエディターである「TinyMCE」を使っている場合に表示されるのであって、CKEditorなどに置き換えている場合は表示されない。
HTMLエディターの切り替えてもソースコードが破壊されることはなく、<pre>タグでマークアップする方法を採用しているため、HTMLエディター上でも<pre>タグを使ってソースコードを記述できるが、ソースコードを予めエスケープする必要がある。
言語を追加する仕組みを備えており、Brushファイルさえあれば、必要な言語を追加できる。ハンドルしているサンプルプラグインでも、いくつかの言語を追加できる。
「Syntax Highlighter Compress」は、どちらかと言えば、マイナーな部類になると思う。
実際、私も「Syntax Highlighter Compress」の存在を知らなかった。
しかし、他のプラグインと異なる新しい試みをしているプラグインである。
もっと早く「Syntax Highlighter Compress」と出会っていれば、「WP SyntaxHighlighter」を作ることはなかったかもしれない。
現時点の最新版は、バージョン3.0.83.2。
内包するライブラリは「SyntaxHighlighter 3.0.83」のみで、「SyntaxHighlighter Evolved」や「Syntax Highlighter for WordPress」のような、ソースコードの有無を確認する処理を実装していないため、JavaスクリプトやCSSは、すべてのページで書き出され、無駄が多いと言える。
しかし、Brushファイルの読み込みは、「Syntax Highlighter」ライブラリの機能である「Dynamic Brush Loading」に依存して行われるため、不要なBrushファイルは読み込まれない。
また、Javaスクリプトをヘッダーに書き出し、「Dynamic Brush Loading」や設定に関する部分と実行部のみをフッターに書き出している点も「SyntaxHighlighter Evolved」や「Syntax Highlighter for WordPress」とは異なっている。
しかし、最大の特徴は、ソースコードの記述方法にあり、ビジュアルエディター上に追加されるボタンを使って簡単にソースコードの記述が出来るように設計されている点である。
ただし、これは標準のビジュアルエディターである「TinyMCE」を使っている場合に表示されるボタンであって、CKEditorなどに置き換えている場合は表示されない。
操作が簡略化されているために見えにくくなっているが、<pre>タグを使ってマークアップする方法を採用している。
HTMLエディターの切り替えてもソースコードが破壊されることはないが、HTMLエディター上では、簡単にソースコードを記述する方法ないため、主としてビジュアルエディターを使っているユーザーが対象になる。
また、一度入力したソースコードのオプションを変更する場合は、HTMLエディターに移動し、手作業で修正する必要がある。
設定画面は、日本語表示には対応していないものの、十分な機能を備えたしっかりしたものになっている。
「WP SyntaxHighlighter」を作るにあたって、実は、同類のプラグインのコードは、殆ど参考にしていないのだが、「Syntax Highlighter Compress」は、例外である。
ある部分の処理をそのまま真似ている。
ボタンに関わる部分ではあるが、ボタンそのものの処理ではない。どこか分かるだろうか？
このプラグインは、「SyntaxHighlighter 3.0.83」ライブラリを使用している。
現時点の最新版は、バージョン2.0。
「Auto SyntaxHighlighter」は、「SyntaxHighlighter Evolved」と「Syntax Highlighter Compress」の長所を１つにしたようなプラグインである。
「SyntaxHighlighter Evolved」譲りの処理で、必要なページでのみ、必要なJavaスクリプトとCSSの読み込みを行っており、加えて、「SyntaxHighlighter Evolved」とは異なり、おそらく「HTML valid」なソースを書き出している。
また、ソースコードの記述は、「Syntax Highlighter Compress」同様にビジュアルエディター上のボタンで行う。
しかし、一度入力したソースコードのオプションを変更する場合は、HTMLエディターに移動し、手作業で修正する必要がある。
ボタンで操作するため分かりにくいが、このプラグインも<pre>タグを使ってマークアップする方法を採用している。
HTMLエディター上でコードを記述する際は、<pre>タグを使ってマークアップすれば良いが、ソースコードは、エスケープされていなければならない。
ここまで話だけなら、高機能なプラグインに思えるかもしれないが、実は「Auto SyntaxHighlighter」は、設定画面を備えていない。
つまりテーマすら変更できないシンプルなプラグインである。
ただし、これにはデータベースに書き込んだり、ハイライトの度にデータベースから読み出しを行う必要が無いという利点もある。
もし、シンプルで良いから、効率的な処理と使いやすさを備えたプラグインを求めるなら、これがピッタリだ。
追記：新しくリリースされたバージョン2.1では、設定画面が搭載され、テーマの変更が出来るようになった。結果としてデータベースを使用するようになってしまった。バージョン2.0.1のような良い意味で単純な実装ではない。しかし、ソースコードの記述を補完する機能はなく、中途半端な印象が否めない。また、更に古いバージョン2.0には設定画面があるので、方向性としてデータベースを使わない実装を目指しているわけではないようである。
「Syntax Highlighter MT」は、これと言った特徴が無く、単にWordPress上で「SyntaxHighlighter」を使えるようにするだけのプラグインである。
現時点の最新版は、バージョン2.0.1で、「SyntaxHighlighter 3.0.83」ライブラリを使用している。
Brushファイルの読み込みに「Dynamic Brush Loading」を利用しており、不要なBrushファイルは読み込まれない仕様だ。
設定画面はなく、ソースコードの入力を補完するような機能も実装していない。
ソースコードは、<pre>タグでマークアップして記述すれば良いが、事前にソースコードをエスケープしておく必要がある。
つまり、実質的にHTMLエディターから記述する事になる。
「SyntaxHighlighter TinyMCE Button」で補完すれば、ビジュアルエディターからのソースコードの入力が楽になり、使い勝手が良くなるが、単体での利用に関しては、シンプルであること、データベースを利用しないこと以外にメリットが見つからない。
もし、テーマを編集してプラグインを使わずに「SyntaxHighlighter」を導入しようとしているなら、代わりに「Syntax Highlighter MT」を使った方がテーマの更新の際も余計な作業が発生せず楽である。
このプラグインは、「SyntaxHighlighter 2.0.296」ライブラリを使用しており、最新のライブラリ備える他のプラグインと比べて、ライブラリのバージョンが古い。
現時点の最新版は、バージョン1.0b2。
元々は「SyntaxHighlighter Evolved」の強化版としてスタートしたようだが、長らくアップデートされていないので、強化版としての意味はない。
設定もテーマの選択のみと非常にシンプルである。
ソースコードの有無と言語の種類を判断にする機能を備え、必要なページでのみ、必要なJavaスクリプトが読み込まれる。
しかし、CSSは、全てのページで読み込まれる。
ソースコードの記述は、ショートコードを使って行う。
[sourcecode language="php"]ソースコード[/sourcecode] [source language="c"]ソースコード[/source] [code language="xhtml"]ソースコード[/code] [sourcecode lang="php"]ソースコード[/sourcecode] [source lang="c"]ソースコード[/source] [code lang="xhtml"]ソースコード[/code] [sourcecode="php"]ソースコード[/sourcecode] [source="c"]ソースコード[/source] [code="xhtml"]ソースコード[/code] [lang="js"]ソースコード[/lang] [php]ソースコード[/php]
一部の書式は、「SyntaxHighlighter Evolved」と互換性がある。
ビジュアルエディター、HTMLエディターの両方でソースコードの記述が可能で、ソースコードをエスケープする必要はない。
「SyntaxHighlighter Evolved」と異なり、HTMLエディター上で記述したソースコードも自動的にエスケープされて保存される。
しかし、「&」のエスケープに問題があり、保存の度に2重、3重にエスケープされてしまうため、1度の保存しか許されない。
長い間アップデートされていないプラグインであるため、そもそもWordPress 3.2.1では、動作に問題があるのかもしれないが、最新の環境では実質的にビジュアルエディターからしかソースコードは記述できない。
正直、積極的に選ぶ理由のないプラグインである。
