WordPress: コード整形プラグイン SyntaxHighlighter Evolved 導入

plug-in,WordPress

基本からしっかりわかる　WordPress 3カスタマイズブック (Web Designing Books)

WordPressの記事中に表示するソースコードを、整形して見やすく表示するプラグイン「SyntaxHighlighter Evolved」を導入しました。

これまでは「iG:Syntax Hiliter 日本語版」を使っていたんだけど、まれにコードの整形に失敗する場合があり、これに嫌気が差して乗り換えることにしました。

「SyntaxHighlighter Evolved」を選択した理由は、ベースに使っているjsが「Google syntaxhighlighter」とメジャーな仕組みなコト、また整形後の見た目の綺麗さ、あとは他ブログでの使用数などを鑑み、「本流」と思われる「SyntaxHighlighter Evolved」を選択しました。

プラグインの導入に難しいことはなく、いつものようにダウンロードして、プラグインフォルダに展開して、有効化するだけ。

使い方も簡単で、コードの前後を［html］～［/html］なんて感じに囲うだけ。

で、実際の表示はこんな感じになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div class="foobar">
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

PRE表示にJSでCSSを被せるので、一瞬だけ素のコードが見えるけど、その後は非常に見やすいコードになっていると思います。

当たり前のようにHTML関連文字列は正規化してくれてるし、URLもクリッカブルだし、各種予約後は色つき表示だし、コード上にマウスをポイントするとソースコピペなんかのコマンドアイコンが出てきます。

各種言語にも広く対応しているし、行番号の有り無し、任意行数からのカウント、特定行のハイライト、行折り返しの有無なども簡単に指定可能な優れものです。

もしWordPressを使っていて、コードを綺麗に表示したいなら「SyntaxHighlighter Evolved」をオススメしておきますよ :-P