tamuraです。

Markdownでブログを書く件の続きです。

前回はmarkedを使ってMarkdownをHTMLに変換しました。 今回はシンタックスハイライトについてです。


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


コード部分

コード部分バッククォート3つで囲います。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(&quot;Hello World&quot;);
    }
}
</code></pre>

クラスの付与

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

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

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

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

ページの読み込みが完了すると、<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内に書きます。


custom-js

jQueryの読み込み

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

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

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


custom-js-jquery

JavaScriptの挿入

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

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

これも同じく書きます。


custom-js-js

これで完成です。

まとめ

この方法を使うと、Visual Studio CodeやKobitoなどでプレビューした内容がほぼそのままブログに載ります。

この方法が使えないのであれば、Gistもありかなと重います。Gistにコードを書いて共有用のJSを貼り付けるだけなので便利です。