プログラム系の記事を書いている方なら、記事中にコードを記述することがあります。
そんなとき、<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(); ?> を確認し、なければ追記します。
WordPressの管理画面にログインし、【プラグイン】をクリックします。
syntaxhighlighterが追加されているので、【使用する】をクリックして「使用中」にします。
記事を投稿してみる
ブログの記事作成画面で、
[code=’php’]
// コメント
$hoge = $fuga;
[/code]
※シングルクォーテーション(') と スラッシュ(/) は、半角にしてください。
このように入力すると、
// コメント
$hoge = $fuga;
こんなふうに表示されます。 なかなかいい感じで便利です。
行番号とか、「view plain」などのメニューも自動的に追加されちゃいます。