WordPressでプログラムコードを綺麗に表示させるプラグイン「SyntaxHighlighter Evolved」 | ITキヲスク

少し前の話になりますが、巷じゃ「WordPress2.8.4にアップグレードしないと危険だぉ☆」との情報が流れてたんで、早速アップグレードしたんですが、したらなんと、今までフツーに動いていたプラグインのいくつかが動かなくなっちゃいました。

その後の修復作業でほとんど収まったんですが、そうしても「Syntax Highlighter for WordPress」だけがダメだったんですね。

なので他のSyntax Highlighterを探して回ったところ、まさにコレ！というプラグイン「SyntaxHighlighter Evolved」を見つけることが出来たので、備忘録代わりにエントリーしちゃいますー。

この「SyntaxHighlighter Evolved」、世にある他のSyntax Highlighterプラグインとの互換性を保つ為、<pre>タグでも[code]でも記述可能というスグレモノなので、他プラグインからの乗り換えもラクチン極まりなし。

簡単ですが使用例や導入手順も併記しますので、これからWordPressにSyntax Highlighterを導入しようという方の助力なれば、と。

WordPressでプログラムコードを綺麗に表示させる「SyntaxHighlighter Evolved」

早速ですが、使用例です。

[記述したい言語]と書いた直後に表示させたいhtmlソースをベタ書きして、最後に[/記述したい言語]と記述すれば、[○○] [/○○]内のソースコードが下記のように表示されます。

【HTMLの場合】
[html]
<div class=”around_thirty”>
    <h1>「枕からオヤジのニオイ」は都市伝説じゃなかった。</h1>
</div>
[/html]
と書くと、下記のように表示されます。

<div class="around_thirty">
	<h1>「枕からオヤジのニオイ」は都市伝説じゃなかった。</h1>
</div>

【CSSの場合】

[css]
div#around_thirty {
    border: none;
}
[/css]

div#around_thirty {
	border: none;
}

【JavaScriptの場合】

[js]
$(function(){
    $(“div#around_thirty”).text(“「オレ？GReeeeNとか聞くし(笑)」”);
)}
[/js]

$(function(){
	$("div#around_thirty").text("「オレ？GReeeeNとか聞くし(笑)」");
)}

【PHPの場合】

[php]
if(isset($doutei)){
    $palam = str_replace(“純情”, “妖精”, “経験？オレ、純情だし。。。”);
}
[/php]

if(isset($doutei)){
	$palam = str_replace("純情", "妖精", "経験？オレ、純情だし。。。");
}

導入手順

まずはWordPress › SyntaxHighlighter Evolved « WordPress Pluginsにて、今回の主役である「SyntaxHighlighter Evolved」をダウンロードします（画面右側にある、赤い「Download」ボタンをクリック）。

んで、ダウンロードしたzipファイルを解凍して、その解凍したフォルダをまるごと、WordPressを入れてるサーバのpluginフォルダ内にぶっ込みます。

あとはWordPress管理画面でこのプラグインを有効化すれば完了です！

各種設定項目の説明

WordPress管理画面の左部メニュー「設定」内の「SyntaxHighlighter」にて、SyntaxHighlighter Evolvedの細かい挙動設定が出来ます。

ここでは6個のコード表示スタイルの他に、下記のような設定項目があります。

• 「Display line numbers (行番号の表示の有無)」
• 「Display the toolbar (コード表示部の右上に出るツールバーの表示の有無)」
• 「Automatically make URLs clickable (コード内にURLが記述されてた場合の自動リンクの有無)」
• 「Collapse code boxes (コード表示部の折りたたみ機能の有無)」
• 「Show a ruler column along the top of the code box (ルーラーの表示の有無)」
• 「Use the light display mode, best for single lines of code (シンプル表示機能の有無)」
• 「Use smart tabs allowing tabs being used for alignment (スマートタブ機能の有無)」
• 「Wrap long lines, using an icon to show where line wraps occur (自動改行時の改行アイコンの有無)」

使用上の注意

これはこのプラグインの唯一にして最大の注意点なんですが、この「SyntaxHighlighter Evolved」を使用する場合、テーマファイルのheader.phpの</head>の前に、必ず<?php wp_head(); ?>という記述を加えなきゃいけません（じゃないとこのプラグインは動きません）。

同様に、footer.phpの</body>の前にも、<?php wp_footer(); ?>という記述をしないといけません。

まぁ大して難しい話でもありませんので、もし導入したのに動かなかった場合はココらへんを疑ってみてください。

参考にさせていただいたサイト：

• WordPress備忘録－ソースコードを見やすく表示するプラグイン『SyntaxHighlighter Evolved』
• SyntaxHighlighter Evolved のプラグインへの追加 (Bitmacroブログ)
• SyntaxHighlighter EvolvedのSetting (Bitmacroブログ)
• はなし半分なマトメ。 – SyntaxHighlighter Evolved 導入