WordPressでシンタックスハイライトを適用する

プログラム系の記事を書いている方なら、記事中にコードを記述することがあります。

そんなとき、<pre>で囲ってコードを書いたりします？？
なんだか読みづらいから、コメントにcssを適用させちゃったりして・・・

実は、ついさっきまでの私がそうでした。

<pre>
  <span class="comment">// ここはコメント</span>
  $hoge = $fuga;
</pre>

こんな具合に・・・。

ふと思い立って探してみれば、やはりあるものですね。

インストールしたプラグインは、【SyntaxHighlighter 1.1.1】です。
http://wordpress.org/extend/plugins/syntaxhighlighter/
こちらの、右上のオレンジ色の部分【Download】をクリックするとダウンロードできます。
ちなみに、WordPress用となっています。

インストール手順

とりあえず、上記のリンクよりファイルをダウンロードします。
そして、解凍します。

FTPで、webサーバに接続し、
/wp-content/plugins/syntaxhighlighter
このように、解凍したフォルダごとアップロードします。

/wp-content/themes/ に移動し、使用しているテーマのフォルダを開きます。
footer.phpをダウンロードし、テキストエディタで開きます。
次のように、 <?php wp_footer(); ?> を確認し、なければ追記します。

<?php wp_footer(); ?>
    </body>
</html>

WordPressの管理画面にログインし、【プラグイン】をクリックします。
syntaxhighlighterが追加されているので、【使用する】をクリックして「使用中」にします。

記事を投稿してみる

ブログの記事作成画面で、

1
// コメント
$hoge = $fuga;
[／code]
※シングルクォーテーション(') と スラッシュ(/) は、半角にしてください。

このように入力すると、

// コメント
$hoge = $fuga;

こんなふうに表示されます。 なかなかいい感じで便利です。
行番号とか、「view plain」などのメニューも自動的に追加されちゃいます。

Related posts:

1. PHP MVC のディレクトリ構成を考える
2. [PHP] コーディング規約
3. Transfer.php から安全な場所に処理を渡す
4. 処理の流れを考える
5. [Utility.php] ブラウザがXMLをサポートしているかチェック