ソースを色分けして見やすくするSyntax Highlighterの選択

革新的なプログラムから簡単なhtmlまで、関数や変数、属性名ごとに色分けしたり綺麗に表示してくれるSyntax Highlighterというものがある。
wordpressのpluginでも沢山あり、とても便利なんだけど何故か派生pluginが多い！名前も似てるためどれが定番かも良く分からないし、どれも見た目にも似ててよくわからない。
つい最近利用していたplugin、SyntaxHighlighter Plusがヴァージョンアップした途端表示がおかしくなり、pluginの管理画面すら表示されなくなってしまった。
折角の機会なので他の類似pluginも検討する事にした。

追記あり

Syntax Highlighter for WordPressに関しては更新してもらったので別記事に。
wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress” – atl*weblog
その他ちょいちょい修正。

さてこのSyntax Highlighter系のplugin、派生が多いというかどれが大本かすらよくわからない事になっているのだが、別にこれはwordpressのpluginだけの話じゃなく、javascriptのみで動くモノとかサーバーで変換するモノとか色々ある。（それだけに探すのが結構大変になるが）
その中でも比較的導入が楽なwordpressのplugin、もしくはjavascriptのみとして見つかったものを片っ端から試して比較してみる事にした。
以前の経験を活かし、ちゃんとテスト用のwordpressをインストールして、そっちでやってみる事に。¹

余談だがSyntax Highlighter系のものは、書き出されるソースは一見シンプルに見えるが実際はこれでもかとdivやspanで色分けするため一行一行を細切れにタグづけしまくっているので注意。普通にソース見ると上記のように綺麗だが、firebug等で実際にjavascriptで加工後のソースを見るとかなりネストしている。
これはつまり、見た目をカスタムするためcssを書くのが若干面倒なのと、別のplugin等にするとこのネスト構造がごっそり変わるためcssは書き直しになるという事だ。逆に言えば親要素の独自名をcssに設定してあげれば他のpluginにした際下手にcssがあたらないので利点でもあるが。
動的に書き出されるソースまでvalidじゃないと嫌という人や、divやspanをむやみに使うのイクナイ！って人は恐らく自作も考慮しないといけないだろう。²

判断基準は以下。

1. ソースがxhtml Strictでvalidになる
2. pluginをはずしても問題なく表示される
3. 出きればjavasctriptの特定のライブラリに依存しない
4. ほどほどにシンプル
5. 主に利用する言語はphp、html、xhtml、css、javascript、sql

wordpress plugin

wordpressのpluginは基本有名なjavascriptのライブラリーを利用し、それを読み込むscriptタグを挿入するものが多い。
大きく分けてSyntaxHighlighterとGeSHiの2つだ。細かい差異はあるけど、ベースとなるこの二つのライブラリそれぞれの特徴をpluginも引き継いでいる。
大まかな特徴は以下。

SyntaxHighlighter

SyntaxHighlighter – Alex Gorbatchev

• javascriptで作られている。
• 最新ヴァージョンは2.0.287。
• 以前はdp.SyntaxHighlighterという名前で開発されていて、Yahoo! UI Libraryの解説ページでも利用しているもの。
• 最新版は右上にソースコード、プリント、ヘルプ、とデカイボタンがある。
• 最新版は改行にアイコンが付く。
• 動的生成するのでブラウザで見るソースと、実際表示されているソースが違う。
• かなり細かいネスト構造、複雑ゆえcssによるカスタムがしにくい。
• cssを選択し、予め用意されたいくつかのスタイルに見た目を変更できる。

GeSHi

GeSHi – Generic Syntax Highlighter :: Home

• サーバーサイドで整形しhtmlを書きだすタイプ、phpで書かれているようだ。
• javascriptによる動的書き出しをしていない、つまりソースを表示で見れるソースがそのまま表示される結果になっている。
• tableタグを利用している。
• preタグで改行を表現し行番号を縦表示している。
• 一応xhtml Strictがvalidであるが、tableを利用すべき内容では無いのは確かなので判断が難しい所。

以上を踏まえて片っ端からテストしてみた、テスト環境はwordpress2.7.1。

SyntaxHighlighter Plus

試したヴァージョン

1.0b2

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

2.7.x

利用ライブラリ

SyntaxHighlighter

記述方式

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

plugin page

WordPress › SyntaxHighlighter Plus « WordPress Plugins

auther page

Release: [Wordpress Plugin] SyntaxHighlighter Plus | Beyond Coding

今まで使ってたplugin。何故数ある中からこれを選んだのか、今となってはさっぱり覚えていない。導入時点でのヴァージョンは0.18。
“SyntaxHighlighter”（plugin名）をベースにカスタムしたpluginらしい、“SyntaxHighlighter”については下のほうで試している。
オリジナルとの変更点は、xhtmlValidなこと、対応言語増加、バグフィックス、オーバーフロー対応、テーマ形式でcss導入、wp管理画面での詳細指定てなあたりのようだ。
テーマとしてcssがいくつか用意されていて、いくつかの中から見た目を選択出来る形だった。SyntaxHighlighter　library自身の効果でした＞＜

SyntaxHighlighterのサイトにもリンクがあるように、現状このpluginがSyntaxHighlighter libraryをwordpressに導入するうえでの準標準となるpluginみたい。

対応言語

• Bash — bash, sh
• C++ — cpp, c, c++
• C# — c#, c-sharp, csharp
• CSS — css
• Delphi — delphi, pascal
• Diff — diff
• Groovy — groovy
• Java — java
• JavaScript — js, jscript, javascript
• PHP — php
• Plain text — plain, text
• Python — py, python
• Ruby — rb, ruby, rails, ror
• SQL — sql
• VB — vb, vb.net
• XML/HTML — xml, html, xhtml, xslt

記述方法

実際に使う場合クォーテーションは半角、一番下の直接言語名でタグる場合は左右の半角スペースを無しで。

[source language=’css’] … [/source]
[code language=’css’] … [/code]
[sourcecode lang=’css’] … [/sourcecode]
[source lang=’css’] … [/source]
[code lang=’css’] … [/code]
[sourcecode=’css’] … [/sourcecode]
[source=’css’] … [/source]
[code=’css’] … [/code]
[lang=’css’] … [/lang]
[ css ] … [/ css ]

結果図

書き出されるソース

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

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

<link type="text/css" rel="stylesheet" href="プラグインへのパスsyntaxhighlighter-plus/syntaxhighlighter/styles/shCore.css"></link>
<link type="text/css" rel="stylesheet" href="プラグインへのパスsyntaxhighlighter-plus/syntaxhighlighter/styles/shThemeDefault.css"></link>

フッターにはjavascript呼び出しが挿入される

<!-- SyntaxHighlighter Stuff -->
<script type="text/javascript" src="プラグインへのパスsyntaxhighlighter-plus/syntaxhighlighter/src/shCore.js"></script>
<script type="text/javascript" src="プラグインへのパスsyntaxhighlighter-plus/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<!-- Reassign aliases -->
<script type="text/javascript">
	SyntaxHighlighter.brushes.Php.aliases = ["php"];
</script>
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

感想

今回新たにあれこれ探すキッカケになったこのplugin、確かに一応xhtmlはvalidではある、javascriptはフッターで呼び出すのもいい感じなんだけど・・・。
ヴァージョンアップによる変更点は、最新のSyntaxHighlighter 2.0に対応した点で、これがいまいち好みじゃない。
右上のやたらでかいボタンが追加。（非表示にする事は出来る）改行を表すリターンアイコンもなんかデカイ、cssで文字を小さくしたいがこの画像までは小さくならないから行間がおかしな事になる。
しかも見ての通り、連続する半角文字の改行がうまくいってなく、範囲を飛び出している。これがブラウザのせいなのかはわからないがこれはちょっといただけない。（アイコンもかぶさるし）
ちょっと書き出されるソースが結構ごちゃごちゃしてるので、cssでスクロールバーを表示出来るか不安。
また、ダブルクォーテーションが勝手にエンコードされてしまう、シングルクォートにすりゃいいんだけど使い分ける場合も問題だし、そもそも俺は基本ダブルクォート使うクセがあるんで地味に困る。
そして致命的なのがwordpressのplugin設定画面がエラーを吐いて動かない点。まぁさすがにすぐバージョンアップされ改善されるとは思うんだけど、これはねーっす＞＜
しかしリリースしたって事は…ひょっとして日本語環境だからエラーだったのだろうか、仮にそうすると修正が遅れる予感。
余談だけどこのヴァージョン、“1.0b2”ってことはβ版なんだよなぁ、wordpressの管理画面でpluginアップデートしてんぜってお知らせアイコン出てたから何も考えずアップデートしたけど。インストールする前にβ版ですよとかアナウンスしてくれるとうれしいんだけどなぁ、もしくはβ版は自動配布させない設定をauther側で出来るとか…；；

Google Syntax Highlighter for WordPress

試したヴァージョン

1.5.1

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

2.0.0かそれ以上

利用ライブラリ

SyntaxHighlighter

記述方式

preタグ

plugin page

WordPress › Google Syntax Highlighter for WordPress « WordPress Plugins

auther page

geek + red sox + cooking = peter ryan

pluginページにはGoogle Syntax Highlighterって書いてあるんだけどGoogle製な訳ではない、SyntaxHighlighterライブラリ利用のplugin。
数ある、対応バージョンがはるか昔のwordpressバージョンのままのpluginの一つ。こういうのは敬遠してきたけど、果たしてちゃんと動くのか…。

対応言語

• C++ (cpp, c, c++)
• C# (c#, c-sharp, csharp)
• CSS (css)
• Delphi (delphi, pascal)
• Java (java)
• Java Script (js, jscript, javascript)
• PHP (php)
• Python (py, python)
• Ruby (rb, ruby, rails, ror)
• Sql (sql)
• VB (vb, vb.net)
• XML/HTML (xml, html, xhtml, xslt)

記述方法

実際に使う場合クォーテーションは半角、一番下の直接言語名でタグる場合は左右の半角スペースを無しで。

<pre name="code" class="言語名">
…
</pre>

結果図

書き出されるソース

<pre name="code" class="php">
/*---------------------------------------------------------
test php code
---------------------------------------------------------*/
function hoge ($l='test') {
for ($i=0;$l<=$i;$i++) {
echo ($i);
}
}
</pre>

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

<link href="プラグインへのパス/google-syntax-highlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />

フッターにはjavascript呼び出しが挿入される

<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shCore.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="プラグインへのパス/google-syntax-highlighter/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'プラグインへのパス/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

感想

書き出されるソースのpre要素にname属性なんか使われちゃったりする上、ページ下部で呼び出すjavascriptのscript要素にtype属性が皆無だったりclass属性が付いていたりで痛い。
今回テストで簡単なphpのソースを利用しているが、php以外の表示に使うであろうjavascriptライブラリまでこぞって読み込んでいるのもなんだかなぁといった感じではあるが、まぁこれは許せる範囲。
一番ダメなのは見た目かぁ、cssである程度変更出来るとは思うんだけどベースがあまりにアレだとcssへの依存度がでかくなって、アップデートでちょっと差異が出ただけで大改造、とか勘弁だしなー。
ちなみに利用ライブラリの“SyntaxHighlighter”は最新ヴァージョンではないようで、右上にでかいボタンが表示されたりはしなかった。

iG:Syntax Hiliter

試したヴァージョン

3.5

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

1.5.2 and 2.0.1

auther page

Canned !! — my Atropine » iG:Syntax Hiliter

真打登場、そう言っていいほど検索すると最初に引っかかるシンタックス系のwordpress plugin、なのに公式に登録されてないらしくwordpressのplugin検索では引っかかりもしない。なんでだろう？？
1.5.2と2.0.1のwordpressでテストしてます、との事…だいぶ古いなこれもまた。
日本語化もされているので、一時期定番の一つだった事が予想される。
iG:Syntax Hiliter 日本語版 – MMRT daily life

感想

エラー吐いてプラグインの有効化が出来ませんでした＞＜

Syntax Highlighter for WordPress

試したヴァージョン

1.5.1.1

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

2.7

plugin page

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

auther page

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

これが今回の本命、上で書いた“Google Syntax Highlighter for WordPress”でもベースに利用してたSyntaxHighlighterを使い日本人のをかもとさんが開発したplugin。

対応言語

• c
• cpp
• csharp
• java
• javascript
• delphi
• pascal
• php
• python
• ruby
• vb
• vbnet
• sql
• css
• xml
• html
• xhtml
• xslt

記述方法

numは列の開始番号

[言語名 num="10"]～[/言語名]

感想

動かない、記事にエラーを吐き出す。
パラメータが変みたいなエラーだったのでソースを見てみると、htmlentitiesにパラメータを4つ使ってる。
なるほどdouble_encodeにtureをセットしてるけど、このパラメータはphp5.2.3以降から実装されたのでphp4.xじゃ動かないって訳か！
どこにも書いて無かったYO！＞＜
heteml鯖じゃphpの5以降は拡張子を.php5にしないといけないんだけど、そうするとwordpressでpluginを認識してくれなくなる。
.htaccessでディレクトリ内のphpをphp5として動かす事も出来るが、そもそもhetemlのphp5はphp5.1.xなのでそれでもまだhtmlentitiesのdouble_encodeは実装していない、無念。
なんだろうphp5ってもう一々書く間でも無くデフォなんだろうなぁ、これはpluginよりいまだphp4.xのままのサーバーがおかしいよなぁ、つってもそこのサーバーを利用して稼動中のサービスもあったりしてむずかしいのかなぁ。

注意

このpluginに関して作者のをかもとさんからコメントにて連絡があり、修正していただいたので別で最新版のレビューを追加しました。
wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress” – atl*weblog

WP-Syntax

試したヴァージョン

0.9.2

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

2.0かそれ以上、2.7とも互換性あり

利用ライブラリ

GeSHi

記述方式

preタグ

plugin page

WordPress › WP-Syntax « WordPress Plugins

auther page

Ryan McGeary

この記事を書いている時点での最新アップデートの日が2009/01/24と、比較的最近もちゃんと更新しているplugin。
ちゃんと2.7とも互換しているようだ。
ベースにはGeSHiを利用している、GeSHi自体がかなり性能がいいので期待できる。

対応言語

100以上の言語に対応！多すぎて書くのやめた。

記述方法

lineは列の開始番号

<pre lang="言語名" line="1">
…
</pre>

結果図

書き出されるソース

長いので適当にインデントしたり整形してます。

<div class="wp_syntax">
	<table>
		<tr>
			<td class="line_numbers">
<pre>1
2
・
・
（行数分追加）
</pre>
			</td>
			<td class="code">
				<pre class="php" style="font-family:monospace;">
ここにソースが入る
色が付くべきところにはspanで囲い、直でstyle属性で色付け
				</pre>
			</td>
		</tr>
	</table>
</div>

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

<ink rel="stylesheet" href="プラグインへのパスwp-syntax/wp-syntax.css" type="text/css" media="screen" />

感想

GeSHi全般に言える事だが、tableを利用しているのでcssでのコントロールに若干クセがある、テーマによってはかなりcssのほうでいじってやらないと綺麗に表示されないだろう。
とくにテーマによって自動でインデントが付けられる場合、ソースの中身はpreで表示されるのでその付与されたインデント分ソースがずれる事になる。
デフォルトの見た目はシンプルなので、すっきりした見た目が好きならこれもいいかもしれない。

SyntaxHighlighter

試したヴァージョン

1.1.2

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

2.0かそれ以上

利用ライブラリ

SyntaxHighlighter

記述方式

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

plugin page

WordPress › SyntaxHighlighter « WordPress Plugins

直球のplugin名を持ち嫌でも期待高まる、一番最初に紹介したSyntaxHighlighter Plusの元となったplugin。
wordpressのplugin画面からインストールしようとすると、最新のヴァージョンでテストされてませんなんて出るけど、更新されたのは結構最近なので恐らくは問題ないだろう。この辺どういう仕組みなのかな、plugin作成者が設定ミスでこういうの出るのだろうか？？

対応言語

• C++ — cpp, c, c++
• C# — c#, c-sharp, csharp
• CSS — css
• Delphi — delphi, pascal
• Java — java
• JavaScript — js, jscript, javascript
• PHP — php
• Python — py, python
• Ruby — rb, ruby, rails, ror
• SQL — sql
• VB — vb, vb.net
• XML/HTML — xml, html, xhtml, xslt

記述方法

利用する際は各個直後直前の半角スペースを抜く

[ sourcecode language='言語名' ]
…
[ /sourcecode ]

結果図

書き出されるソース

<pre name="code" class="php">

/*---------------------------------------------------------
test php code
---------------------------------------------------------*/
function hoge ($l='test') {
	for ($i=0;$l<=$i;$i++) {
		echo ($i);
	}
}

</pre>

ページ下部にscriptタグ追加

<!-- SyntaxHighlighter Stuff -->
<script type="text/javascript" src="プラグインへのパスplugins/syntaxhighlighter/files/shCore.js"></script>
<script type="text/javascript" src="プラグインへのパスplugins/syntaxhighlighter/files/shBrushPhp.js"></script>
<script type="text/javascript">
	dp.SyntaxHighlighter.ClipboardSwf = 'プラグインへのパスplugins/syntaxhighlighter/files/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
</script>

感想

かなりオーソドックスな部類の見た目。
“copy to clipboard”機能はクリックするとコピーしたよとか出るけど余裕で嘘、IE限定だと思うのでその旨を表示してくれるとよかった。
このplugin、何故かいつの間にか動かなくなってしまった、実はこの記事を書いている途中でwordpress2.7から2.7.1へのアップデートがあったので、調べなおしているんだけど、そのせいかなぁ。
ちなみにSyntaxHighlighter libraryのヴァージョンは最新版ではない、これも更新が止まっている故かも。

WP-CodeBox

試したヴァージョン

1.3.31

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

2.0かそれ以上

利用ライブラリ

GeSHi

記述方式

preタグ

plugin page

WordPress › WP-CodeBox « WordPress Plugins

auther page

WP-CODEBOX Plugin (代码高亮插件) | Eric @ EricBess WebHome

これもGeSHiを利用しあれこれカスタムしたplugin。開閉機能などを持ち、管理画面からいくつかの設定を変更することが出来る。

対応言語

GeSHiに同じ、100を超える言語に対応。

記述方法

ダウンロードファイルを指定する事も出来る。
lineは開始行数、collaはデフォの開閉状態。

<pre lang="言語名" line="1" file="ダウンロードファイル" colla="+">
…
</pre>

結果図

書き出されるソース

<div class="wp_codebox_msgheader">
	<span class="right">
		<sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup>
	</span>
	<span class="left">
		<a href="javascript:;" onclick="javascript:showCodeTxt('p3code1'); return false;">View Code</a> PHP
	</span>
	<div class="codebox_clear"></div>
</div>
<div class="wp_codebox">
	<table width="100%" >
		<tr id="p31">
			<td class="code" id="p3code1">
<pre class="php" style="font-family:monospace;">
ここにソースが入る
色が付くべきところにはspanで囲い、直でstyle属性で色付け
</pre>
			</td>
		</tr>
	</table>
</div>

head内にいくつかのリンク

<!-- Start Of Script Generated By CodeBox -->
	<link rel="stylesheet" href="http://atl.heteml.jp/tstwp/wp-content/plugins/wp-codebox/css/codebox.css" type="text/css" media="screen" />
	<script language="javascript" type="text/javascript" src="http://atl.heteml.jp/tstwp/wp-includes/js/jquery/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="http://atl.heteml.jp/tstwp/wp-content/plugins/wp-codebox/js/codebox.js" ></script>
<!-- End Of Script Generated By CodeBox -->

感想

上部のaタグにtarget属性が含まれている上、head内のscriptタグにlanguage属性もある。
ただ逆に言うとこの程度なので、利用してるDTDによってはvalidでいける、xhtml Strictではさすがに無理だが。
GeSHiの“タグの意味づけはともかくvalidにはするよ”という方針（？）に反する変更ではある。
開閉するギミック自体は面白い上に長いソースコードの場合見やすくなるので実用性はありそうだ。
しかしjavascriptのライブラリ“jquery”を使っているのが、今回の選定内容からははずれてしまうなぁ。

javascript library

google-code-prettify

library page

google-code-prettify – Google Code

こっちは（多分）正真正銘Google謹製のSyntaxHighlighter。
幾つかのjavascriptファイルと一つのcssファイルを任意の場所にアップロードし、テーマのヘッダーで読み込ませる事で利用する。
基本的に言語指定をしなくても勝手に判別して適切な色分けをしてくれる優れもの、指定する事も一応出来る。
普通のソースファイルと圧縮されたセットがある。

対応言語

• C系
• Java
• Python
• Bash
• SQL
• html
• xml
• css
• javascript
• makefile
• LISP（拡張ファイルあり）
• css（拡張ファイルあり）
• Haskell（拡張ファイルあり）
• LUA（拡張ファイルあり）
• OCAML, SML, F#（拡張ファイルあり）
• VB（拡張ファイルあり）
• SQL（拡張ファイルあり）
• Protocol Buffers（拡張ファイルあり）
• WikiText（拡張ファイルあり）

記述方法

<pre class="prettyprint">
…
</pre">
もしくは
<code class="prettyprint">
…
</code">

言語指定する場合は以下。

<pre class="prettyprint lang-言語の略称"">
…
</pre">

言語の略称についてはREADMEに記載されている。

Javascript code prettifier

また、テーマのヘッダー部分に以下を追加する必要がある。

<link href="パス/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="パス/prettify.js"></script>

～中略～

<body onload="prettyPrint()">

結果図

書き出されるソース

<pre class="prettyprint">
/*---------------------------------------------------------
test php code
---------------------------------------------------------*/
function hoge ($l='test') {
	for ($i=0;$l<=$i;$i++) {
		echo ($i);
	}
}

</pre>

感想

行数を表示しないからか、比較的動的に書き出されるソースのネスト具合も穏やか。
自動判別がなかなか優秀で、scriptタグ等がpluginで自動で挿入される訳じゃないのでいじるのも比較的楽そう。
見た目に拘りたいけれど1から言語のハイライト設定なんかしてられないよ、って人のためのカスタムベースになりうる。
bodyにonloadをつけるのが嫌ならイベント付与とかに変更すればいいと思うし、結構どうにでもなる。
長い半角文字が折り返さない問題があるが、cssでスクロールバーが出るように設定してあげれば問題ないかな多分。
さすがGoogle、シンプルで必要な分だけきちんとある仕様。
逆にカスタムできない人には物足りないかも、行数がほしい人とか。

highlight.js

試したヴァージョン

5.2

library page

highlight.js

JavaScriptライブラリの一つ、ダウンロードする際使用する言語を指定する事が出来るので、自分で書く事はないであろう言語を排除しソースを軽く出来る。

対応言語

• 1C
• AVR Assembler
• Apache
• Axapta
• Bash
• C#
• C++
• CSS
• DOS .bat
• Delphi
• Django
• HTML, XML
• Ini
• Java
• Javascript
• Lisp
• MEL
• PHP
• Perl
• Python
• Python profile
• RenderMan
• Ruby
• SQL
• Smalltalk
• VBScript
• diff

記述方法

<pre><code class="言語名">
...
</code></pre>

導入にはhead内部にcssとjavascriptを読み込む、cssは何種類か用意されているのですきなものを。

<link rel="stylesheet" href="パス/default.css" type="text/css" media="screen" />
<script type="text/javascript" src="パス/highlight.pack.js"></script>
<script type="text/javascript">
  hljs.initHighlightingOnLoad();
</script>

また適用したくない場合、classに“no-highlight”と書く事で無効に出来る。

結果図

書き出されるソース

<pre><code class="言語名">
/*---------------------------------------------------------
test php code
---------------------------------------------------------*/
function hoge ($l='test') {
	for ($i=0;$l<=$i;$i++) {
		echo ($i);
	}
}
</code></pre>

感想

導入が比較的楽で、かつ書き出されるソースも結構スマート。
手作業になるが一応行番号にも対応は可能。
pre+codeで普通にコードを書いた所にハイライトをjavascriptでかける、みたいな感覚で使えるので、たとえライブラリの利用をやめても問題なく表示される。
図では長い半角文字がはみ出しているので、cssでスクロールバーが出るように設定してやる必要があるだろう。
行番号さえ入らないのならばシンプルでかなりいい選択肢に思える。
Googleのと比較すると、bodyにonloadを使わない、各種言語用設定を1つのjavascriptにパック出来る、というあたりが優れているか。
逆に劣っている点といえば、当初使用予定のなかった言語に適用させる場合再パックが必要、言語の自動判別はしてくれない、head内で初期化してる、言語指定のclass名が直球すぎて何かとかぶりそう、くらいかな。

まとめ

ショートコードとpreタグ

wordpressのpluginはまだまだあるが、この辺で力尽きてしまった。
pluginは大まかに分けてショートコードを利用する方法と、preタグにclass等をつけて判別する二種類があるが、前者は作るのは楽だしphpでの処理を前提とするので閲覧者のクライアントへの付加が少ないのが利点だと言える。
また、pluginの多くが参照変換を自動でしてくれる所が見逃せない、これはかなり投稿が楽になるだろう。
反面、pluginを停止するとショートコードはそのまま表示されてしまうという欠点がある。
出来れば後者のpreタグを利用する形のものを使えば、仮にwordpress本体のアップデート等でpluginが使えなくなっても、問題なくpreタグ内でソースが表示されるだろう。
こういう事態に備え、予め自分のcssでpreタグのスタイルを整えておき、pluginで上書きされる形にすれば万全だろう。出来ればpreタグ内にcodeタグを加えても問題無いものがstyleの指定もしやすく理想だろうか。

wordpress pluginとjavascript library

pluginとjavascriptのlibrary、どちらを使うべきかという問題もある。
pluginで利用されているSyntaxHighlighterやGeSHiを単独で使用する事も一応可能だが、若干導入が面倒なのと、wordpressのpluginを利用すれば手作業で導入するのと大差なく利用できるので割愛した。
また、デザインやマークアップにこだわりたい人は行番号を諦めてjavascriptで実装したほうが恐らく楽だろう。
ただ、参照変換を自動でやってくれるpluginはやはり魅力ではあるし、pluginでもモノによってはちょっとした修正で行番号を消したり、シンプルな表示に出来るのもある。
見た目に不満がなく、導入や更新ができる限り楽なほうがいいならplugin、見た目含めカスタムに力入れたいならjs libraryがいいだろう。

結局どうしよう

php5.2.3以降を利用出来るなら、Syntax Highlighter for WordPress使って見たかったんだけどなぁ。（対応してもらいました！使えるようになりました！）
とりあえず条件を満たすものは、pluginはなんと無し。GeSHiはちょっと書き出すソースがトリッキーすぎてあまり好きになれないので、これ系はパスしたい。
かといってSyntaxHighlighter系は動かない、validじゃない、ショートコード指定、といったものが多く俺に丁度いいものが見つからなかった。
するとjavascriptなのだが、さてどっちがいいか…。
と迷ったあげく、google-code-prettifyを使う事にした。
理由は自動判別が楽なのと、highlight.jsは場合により再パックがあるからだ。
再パックの手間は大した事ではないが、サービス停止の可能性を考慮するとそれっきりになる可能性があるからだ。

wp.vicunaへの導入

テーマフォルダ内にファイル一式をディレクトリごとアップロードする。
ヘッダーの以下のif文の間に

<?php	if ( is_single() || is_page() ) : ?>
	<script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
<?php	endif; ?>

以下のように挿入した。

<?php	if ( is_single() || is_page() ) : ?>
	<script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
<!--google-code-prettify-->
	<link href="<?php echo get_stylesheet_directory_uri(); ?>/prettify/prettify.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/prettify/prettify.js"></script>
<!--google-code-prettify-->
<?php	endif; ?>

また、single.phpとpage.phpのbody要素にonloadを追加。

さらにwordpressのpluginWP-Quicktagにボタンを登録して完了。
ちなみにこんな感じのコードにした。

<pre><code class="prettyprint">
…
</code></pre>

また当然と言えば当然だが、利用の際表示したいソースは文字の参照変換をしておこう。（ < を ＆lt; など）
javascriptのlibraryでは自動で参照変換はしてくれない。

1. amazonアソシエイトを始めてみる-結局どうしたの編- – atl*weblog [戻る]
2. そういう人は素直にspanとcodeだけなんだろうけど [戻る]

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

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