Jetpack Markdown + highlight.jsで簡単シンタックスハイライト

ブログサービスのWordPress.comの機能をインストール型のWordPress.orgでも使えるようにするプラグインJetpackがあります。その中の機能で、Markdownで記事やコメントが書ける機能というものがあります。XHTMLは冗長で可読性も低く記事を直接XHTMLで書くと無駄が多くなるので、Markdownのようなマークアップ言語を挟むことで書きやすくて読みやすい記事をすばやく書くことができます。

また、プログラミングの話題を扱う場合にはコードを記事に載せたくなる場面が多くなります。そこでただコードを載せるだけではなく、キーワードに色をつけるなどして見やすくすること（シンタックスハイライト）が一般に行われています。

以上の2つを合わせて、Markdownで簡単にコードを載せる方法を紹介します。

Markdownで簡単マークアップ

JetpackのMarkdownはMarkdown Extraで、オリジナルのMarkdownに拡張が加えられているバージョンを使っているので、コード用の拡張記述が使用できます¹。

Markdownで以下のように書きます。

```css
.button {
    border: none;
}```

するとXHTMLで次のように出力されます。<、&のようなエスケープしなければならない文字がコード中に含まれている場合は自動でエスケープしてくれます。

<pre><code class="css">.button {
    border: none;
}
</code></pre>

今回はコード関係しか紹介しませんが、Markdown ExtraにはテーブルなどオリジナルのMarkdownにはない機能もあるので是非チェックしてみてください。

シンタックスハイライト

Markdownが出力したコードを見てみると、コードブロックが<pre><code>で囲まれていますがこれだけではただの整形済みコードです。ここに、シンタックスハイライトライブラリを組み合わせると威力を発揮します。シンタックスハイライトライブラリには色々なものがありますが、現在使っていておすすめなのはhighlight.jsです。

highlight.jsはクライアントサイドで<pre><code>をシンタックスハイライトしてくれます。対応言語112種類・テーマ49種類と豊富なのであらゆるコードをハイライトできます。行番号や一部の行を強調するといった機能はありませんが、その分シンプルで軽いのが特徴です。GLSLやMatlab、CMakeなどといった他のライブラリでは見かけることのない言語も対応しています。

どの言語のコードかは自動で判断してくれますが、<code>のclassに言語を指定できます。Markdownでは~~~htmlや~~~.cssといったように最初の行に続けてclassを指定できます。

対応言語やテーマはデモ、classで指定できるクラス一覧はドキュメントを見てみてください。

WordPressにhighlight.jsを組み込むためのプラグインもあり以下のものがよく使われているようです。

• WP Code Highlight.js
• wp-highlight.js