Google Code PrettifyでWordPressのコードハイライト

Markdownでブログを書くようになって、ほんの気持ち更新が楽になりました。ちなみに自分もプログラマの端くれ（限りなく端っこ寄り）なので、コードをハイライトしたいわけです。そんなにリッチでなくていいんですけど、見た目がキレイだと一見できるプログラマ風じゃないですか。そんな訳で、WordPressにGoogle Code Prettifyを導入する手順です。

プラグイン「Code Prettify Syntax Highlighter」のインストール
1. 「ダッシュボード -> プラグイン -> 新規追加」から「Code Prettify Syntax Highlighter」を検索してインストール
2. プラグインを有効化する
タグに自動でclass=”prettyprint”を追加する
1. 「ダッシュボード -> 外観 -> テーマ編集」
2. 右側から「フッター(footer.php)」を選択
3. <?php wp_footer(); ?>の前あたりに下記のjQueryコードを追加
4. 「ファイルを更新」で完了

追加するjQuery

<script>
(function($, undefined){
  $('code').addClass('prettyprint');
})(jQuery);
</script>

これでハイライトされるはず。他のプラグインでは最初うまくいきませんでした。（ちなみに上のjQueryコードも適用されている…はず）

<code>タグにprettyprintクラスがついていること
prettify.css、prettify.jsが読み込まれていること

この辺りを確認してみてください。

ちなみに参考にしたのはこちらのサイト。インストールしたプラグインは違いますが、どちらもGoogle Code Prettifyを使用しているプラグインです。
WordPressでMarkdown + Syntaxハイライトするには | tsuchikazu blog

ま、導入したって人にお見せできるコードなんてございませんがね…

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル