Markdownでブログを書いてシンタックスハイライトする

tamuraです。

Markdownでブログを書く件の続きです。 前回はmarkedを使ってMarkdownをHTMLに変換しました。 今回はシンタックスハイライトについてです。

google-code-prettify(正式名称はJavascript code prettifierでしょうか？)を使います。

コード部分

コード部分バッククォート３つで囲います。

GitHub Flavored Markdownです。

```java
public class HelloWorld {
    public static void main(String...args) {
        System.out.println("Hello World");
    }
}
```

これを変換すると以下のようなHTMLになります。

<pre><code class="lang-java">public class HelloWorld {
    public static void main(String...args) {
        System.out.println(&amp;quot;Hello World&amp;quot;);
    }
}
</code></pre>

クラスの付与

pretty printの対象にするには<pre class="prettyprint">...</pre>もしくは<code class="prettyprint">...</code>となっている必要があります。

これはmarkedでは対応できないので(もちろんコードを書けばいけますが)、jQueryでやってしまいます。

以下のようなJavaScriptを用意しておきます。

$(document).ready(function () {
  $('code').addClass('prettyprint');
});

ページの読み込みが完了すると、<code></code>にprettyprintというクラスを追加してくれます。

ブログ設定

ブログの設定を行っていきます。

google-code-prettifyの読み込み

https://github.com/google/code-prettify

このページによると

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

これを書け、とあるのでこのタグをページの一番下に差し込みます。 こういうページ装飾系の<script>タグは、ページを読み込むことに集中してほしいので最後のほうに書きます。

livedoor Blogの場合は、カスタムJSのbody内に書きます。

拡張

拡張を使う場合は、 lang=xxx を追加します。 複数の拡張を使いたい時は & で繋ぎます。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=lisp&lang=sql&lang=go"></script>

jQueryの読み込み

jQueryも同じく読み込みます。適当なCDNを使わせてもらいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

先ほどと同様に、カスタムJSのbody内に書きます。

JavaScriptの挿入

またまた同じ部分で今度はJavaScriptを書いていきます。

<script type="text/javascript">
$(document).ready(function () {
  $('code').addClass('prettyprint');
});
</script>

これも同じく書きます。

これで完成です。

まとめ

この方法を使うと、Visual Studio CodeやKobitoなどでプレビューした内容がほぼそのままブログに載ります。 この方法が使えないのであれば、Gistもありかなと思います。Gistにコードを書いて共有用のJSを貼り付けるだけなので便利です。