WordPressでMarkdownのcodeをハイライトする

WordPressでMarkdownのcodeをハイライトする方法です。
WordPressの以前の記事はMarkdownではなく、preで記述されておりpreも対応し
highlight.jsを使用してハイライトされるようにします。

Markdownでコードをハイライト

マークダウンでコードをハイライトするには、『`（グレイヴ・アクセント）』3つでコードを囲む事でコードと認識されて
コードがハイライトされるようになります。

WordPressでの表示のされ方

WordPressでの表示のされかたは、

<!-- code -->

というようなショートコードで囲まれた形で表示されます。

ショートコードをpreタグ+codeタグにする

Markdownの投稿がショートコードのためうまくハイライトされないため、
ショートコードをpreタグ+codeタグになるように修正します。

ショートコードをpreタグ+codeタグで囲まれるように修正する

修正前のショートコードは

alert("javascript!!");

というような形になっています。
ショートコードを修正するために、functions.phpに追記します。

function printCode( $atts, $code="" ) {
  $code = preg_replace( array("/\r/", "/\n/", "/\r\n/"), '', $code, 1 );
  return '<pre><code>' . strip_tags($code) . '</code></pre>';
}
add_shortcode('code', 'printCode');

と、すると上記のコードが、

<pre><code class="javascript">
alert("javascript!!");
</code></pre>

と、いうような形で表示されるようになります。

highlight.jsを使用して、ハイライトする

highlight.jsはコードをハイライトしてくれるプラグインになります。
こちらからダウンロードします。

読み込み

読み込むには、

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

とHTMLに追記し、読み込みます。
テーマは、デモから好きなモノを選んで読み込むcssを変更します。

実行

実行するには、通常は、

hljs.initHighlightingOnLoad();

だけで大丈夫なのですが、今回はコードの種類が2種類あり、

1. Markdown以前の投稿（preタグのみ）
2. Markdown以降の投稿（preタグ+codeタグ）

の、2種類あるため両方に対応する形でJavascriptを記述します。

!function($){
  $(function(){
    $('pre').each(function(i, block) {
      if( $(this).find("code").length > 0 ){
        $(this).find("code").each(function(k, code) {
          hljs.highlightBlock(code);
        });
      } else {
        hljs.highlightBlock(block);
      }
    });
  });
}(jQuery);

と、することで、Markdown以降・以前の投稿両方に対応する価値でハイライト出来るよになります。