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

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

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

実は、ついさっきまでの私がそうでした。
[code=’html’]

  // ここはコメント
  $hoge = $fuga;
[/code] こんな具合に・・・。

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

インストールしたプラグインは、【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(); ?> を確認し、なければ追記します。
[code=’html’] [/code]

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

記事を投稿してみる

ブログの記事作成画面で、
[code=’php’][code=’php’] // コメント
$hoge = $fuga;
[/code] ※シングルクォーテーション(‘) と スラッシュ(/) は、半角にしてください。
[/code] このように入力すると、
[code=’php’]// コメント
$hoge = $fuga;
[/code] こんなふうに表示されます。 なかなかいい感じで便利です。
行番号とか、「view plain」などのメニューも自動的に追加されちゃいます。

広告

1 個のコメント