WordPressでSyntaxHighlighterを使うには

SyntaxHighlighterとは、ブログ等の中でソースコードを表示したい時、特定のコードを色を変えて表示したり、行番号を付加したりしてくれる機能である。なかでも、MediawikiではAlex Gorbachov氏のものを愛用している。WordPressで同じ機能を利用する方法を述べる。

プラグイン

  • SyntaxHighlighter Evolved

WordPressでAGのSyntaxHighlighterを利用できるプラグインはいくつもあるが、このプラグインが一番利用されているので、無難だろう。これの良い所は、文中で使われている言語に必要なjavascriptとcssだけがロードされるところだ。

記述法

MediawikiにおけるSytaxHighlighterの記述法は、<pre class=’brush:XXXX’>…</pre>のように <pre>タグ を使用する(ここで、XXXXはphp,html,javascriptなど、言語名である)。

これに対し、このプラグインでは[XXXX]…[/XXXX]のようにショートコードを使用するだけなので、大きな違いは無い。

例えば

このように記述すると

[php]
// カスタムフィールド'nolink'がtrueだったら、リンクしない($urlをNULLで戻す)
function breadcrumb_nolink($url,$type,$id=NULL) {
	if ($id != NULL) {
		$values = get_post_custom_values('nolink',$id);
		if (is_array($values) && $values[0]) {
			$url = NULL;
		}
	}
	return $url;
}
add_filter('bcn_breadcrumb_url','breadcrumb_nolink',1,3);
[/php]

このように表示される

// カスタムフィールド'nolink'がtrueだったら、リンクしない($urlをNULLで戻す)
function breadcrumb_nolink($url,$type,$id=NULL) {
	if ($id != NULL) {
		$values = get_post_custom_values('nolink',$id);
		if (is_array($values) && $values[0]) {
			$url = NULL;
		}
	}
	return $url;
}
add_filter('bcn_breadcrumb_url','breadcrumb_nolink',1,3);