wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress”

前回の記事でSyntaxHighlighter系のwordpressのpluginとjavascriptのlibraryを可能な範囲で調べたが、pluginの作者の方に読んでいただき、書いた内容に対応した新ヴァージョンを出してもらえたので、新たにレビューしてみる。

Syntax Highlighter for WordPress

試したヴァージョン

2.0.0

対応するwordpressの最新バージョン表記

2.7.x

利用ライブラリ

SyntaxHighlighter

記述方式

ショートコード（ex.[hogehoge]～[/hogehoge]）

plugin page

WordPress Plugins/JSeries » Syntax Highlighter for WordPress (ソース整形表示)

auther page

Syntax Highlighter for WordPress : 独断と偏見の何でもレビュー

前回の記事で調べたうちの1つ、SyntaxHighlighterというjavascriptのlibraryをベースに日本人のをかもとさんが開発したpluginの最新ヴァージョン。
最新ヴァージョンはSyntaxHighlighterの現時点での最新ヴァージョン2.0.287に対応し、さらにPHP4.xに対応してもらいました！

SyntaxHighlighter

SyntaxHighlighter – Alex Gorbatchev

対応言語

• Bash/shell
• C#
• C++(cpp, C)
• css
• delphi
• diff
• groovy
• javascript
• java
• php
• plain text
• python
• ruby
• sql
• vb
• xml(xml, xhtml, xslt, html, xhtml)

記述方法

ショートコードで、使用言語の略称でタグる。

phpの場合
[php]
…
[/php]

htmlの場合
[html]
…
[/html]

略称は“SyntaxHighlighter”の指定に順ずる、詳細は以下に記載されている。
SyntaxHighlighter:Brushes – Alex Gorbatchev

また、オプションで以下の内容を指定出来る

num

行番号の開始番号指定
例：[php num=10]～[/php]

highlight_lines

ハイライト表示したい行を指定
例:[php highlight_lines=[1, 2, 3]]～[/php]

gutter

false を指定すると行番号を表示しない
例:[php gutter=false]～[/php]

ruler

true を指定するとルーラーを表示する
例:[php ruler=true]～[/php]

toolbar

false を指定するとツールバー表示しない
例:[php toolbar=false]～[/php]

light

true を指定すると簡易表示になる
例:[php light=true]～[/php]

font_size

フォントのサイズを指定する
例:[php font_size=90%]～[/php]

結果図

[図]

書き出されるソース

<pre class="brush: php; auto-links: false;" style="margin:18px 0;">
/*---------------------------------------------------------
	test php code
---------------------------------------------------------*/
function hoge ($l='test') {
	for ($i=0;$l>=$i;$i++) {
		echo ($i);
	}
}
</pre>

ヘッダーには以下のcss呼び出しが挿入される。

<link href="プラグインまでのパス/syntax-highlighter/css/shCore.css?ver=2.0.287" type="text/css" rel="stylesheet" />
<link href="プラグインまでのパス/syntax-highlighter/css/shThemeDefault.css?ver=2.0.287" type="text/css" rel="stylesheet" />

フッターにはjavascript呼び出しが挿入される。（phpの場合）

<script type="text/javascript" src="プラグインまでのパス/syntax-highlighter/js/shCore.js?ver=2.0.287"></script>
<script type="text/javascript" src="プラグインまでのパス/syntax-highlighter/js/shBrushPhp.js?ver=2.0.287"></script>
<script type="text/javascript">//<![CDATA[
with(SyntaxHighlighter.config.strings){expandSource="+ ソースを表示";viewSource="プレインテキスト";copyToClipboard="クリップボードにコピー";copyToClipboardConfirmation="クリップボードにコピーされました";print="印刷";help="?";noBrush="Can't find brush for: ";brushNotHtmlScript="Brush wasn't made for html-script option: ";}SyntaxHighlighter.clipboardSwf="プラグインまでのパス/syntax-highlighter/js/clipboard.swf";
SyntaxHighlighter.all();
//]]></script>

実際に動的に書き出されるソースは以下の通り。

<div style="position: relative; top: 18px; margin-top: -18px;">
	<small>
		<strong>言語名</strong>
	</small>
</div>
<div class="syntaxhighlighter" id="highlighter_232742">
	<div class="bar">
		<div class="toolbar">
			<a href="#viewSource" title="プレインテキスト" style="width: 16px; height: 16px;" class="item viewSource">プレインテキスト</a>
			<a href="#printSource" title="印刷" style="width: 16px; height: 16px;" class="item printSource">印刷</a>
			<a href="#about" title="?" style="width: 16px; height: 16px;" class="item about">?</a>
		</div>
	</div>

	<div class="lines">
		<div class="line alt1">
			<code class="number">行番号</code>
			<span class="content">
				<span style="margin-left: 0px;" class="block">
					<code class="内容に合わせた色を指定するクラス名">コード内容</code>
				</span>
			</span>
		</div>

（行数文繰り返し）

	</div>
</div>

感想

今回調べた中では“SyntaxHighlighter library”系のwordpress pluginをシンプルに使うなら、これが一番と言えるんじゃないかな。
その代わり“SyntaxHighlighter library”の全ての機能を簡単に使える、といった類のものではないので、色んな機能を使ってみたい人は自力でテーマを修正するか、海外のpluginを捜すほうがいいだろう。
このpluginが優れてると感じた点は以下の通り。

• xhtml Strictでも問題ない出力結果
• 言語表示に必要最低限なjsファイルしか読み込まない
• 日本人作者ならではの完璧な日本語対応
• 他のライブラリに依存しない
• javascriptをフッターで読み込む

と、そうであってほしい点をきっちり押さえてあり、安定動作もし、更新もされている。
他のpluginは何かしら手落ちがあったり、不安定だったり、更新が長いこと停止しているものが多い。

非常に優秀な反面、好みの問題も大きいが個人的に気になる点もいくつかあった。

言語名の表記のon/offが出来ない

使用言語名を表示するのはpluginによる動作だと思われるが、これを表示したくないケースがある。例えばhtmlの中にphpのコードが含まれていたり、どちらの言語といいにくい場合だ。cssで非表示には出来るものの、これの表示切替が出来たら素敵だった。

言語名表記のタグにsmall使用

非推奨タグではないのでvalidatorは通るが、html及びxhtmlを装飾目的で使うこと自体を避けたい場合、このタグは無くてよかったと感じるかもしれない。

プリントやヘルプなどのツールバーを非表示にしても、フッターのjavascriptでの日本語への文字列置換指定が消えない

ツールバーを非表示に出来る事をちゃんと調べて今更知ったけど、これ出力しないように出来ないのかなぁ。

ショートコードによる記述方法

個人的にはこれが結構致命的だったりする。ショートコードで記述するのは非常に楽なんだけど、一瞬たりともpluginを止めてはいけなくなってしまう。止めた瞬間に過去利用した記事の全てにショートコードがそのまま表示され、最悪中のコードが実行される事になる。

JSeries pluginである

意欲的に活動してくれているJSeriesを悪く言うのは、何か凄く悪者な気分になるが、現時点では(wordpress公式登録pluginと比較し)デメリットもある事は確かだと思う。JSeries Notifierというすごいpluginをもってしてもまだ公式に登録されたpluginの更新告知には及ばないし、その“JSeries Notifier”がいつまでwordpressの更新を追いかけて対応してくれるかはわからない。また、まったくの初心者にとってplugin配布場所が二箇所あり、そのサイトデザインがまったく違うと恐らく混乱するか、怪しんでしまう気もする。¹

またこれはpluginのせいではないが、元々のSyntaxHighlighterlibraryの不満点も含まれる。

• 連続する英数字の長文を折り返さない、時がある（どういう状況で折り返さないかよくわかってない）
• cssによるデザインの変更が少し難しい
• IE6に未対応（ツールバーを表示しなければ問題ないようにも見えるが…）

まとめると、凄くいいpluginだが遠い将来テーマから作り直す予定なので、その際古い記事を手直しする事になりかねないショートコード利用のpluginは少し抵抗があるので導入は見送りに。
新しくしたテーマがこのpluginを無理なく使用出来そうなら、その際真っ先に検討する予定。
ただほとんどの人にとってこのpluginはベストプラクティスになるだろう、他を検討する可能性があるとしたら俺のように特殊な理由からか、もしくはSyntaxHighlighterのlibraryの機能をフルに使いたい人、どうしてもsmallタグが嫌な人、くらいじゃないかなぁ。

1. 初心者はSyntaxHighlighterなんかに興味がないという説もあるし、多分それは本当だ [戻る]

関連するかもしれない他の記事

• iPhone appのリンクをクリックしてもクソ重いiTunesを起動しないで情報だけ見るGreasemonkey (3)
• hetemlでwordpressのプラグイン“Shadowbox JS”を使う場合の留意点 (1)
• wordpressで非公開コミュニティサイトを作る（7）feedのカスタマイズ2（失敗） (0)