はてなブログのシンタックスハイライトを綺麗にする

1. 背景

例えばPythonのコードをはてなブログに貼り付けたい場合、

```python

【ソースコード】

```

と記述することで以下のように表示されます。

@app.route("/lifegame")
def lifegame():
    """ Conway's Game of Life """
    return render_template("lifegame.html")

あまり綺麗ではないしカスタマイズも（たぶん）できなくて萎える...と思いきや、はてなブログはJavaScriptを差し込むことができるため、highlight.jsを使ってAtom One Dark風のシンタックスハイライトを実装することができました。他にも185言語・89種類のスタイルが使えるようです。

2. highlight.jsの導入

Webページ内でシンタックスハイライトを行うhighlight.jsというライブラリを用います。 はてなブログ固有の手順もあるため、順番に記していきます。

2.1. highlight.jsを取得

まずはhighlight.jsのスタイルをCDNから読み込むよう設定します。

• 管理画面 => デザイン => カスタマイズから「フッタ」を選択し、HTML記入欄に以下をコピペしてスタイルを読み込みます
  • 下記はatom-one-darkというテーマを使用する場合で、その他のテーマを使いたい場合は当該部分を書き換えればOKです。
  • 利用できるテーマ名はhighlight.jsのトップページやデモから確認できます。

<link rel="stylesheet"
     href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2.2. 行間の調整

これだけでも使えるようにはなっているのですが、使用しているブログのテーマなどによっては行間が空きすぎていると感じるかもしれません。 必要に応じて、

• 管理画面 => デザイン => カスタマイズから「デザインCSS」を選択し、以下をコピペする
• 好みに応じて24pxのところを変更する

を実行すれば調整が可能です。

.entry-content code {
  line-height: 24px !important;
}

3. 使い方

ブログ編集画面で以下のように記述することでシンタックスハイライトが行われます。背景色を設定し、codeタグのclassで言語を指定しています。

<pre style="background-color: rgb(40, 44, 52) !important;"><code class="python">
【ソースコード】
</code></pre>

これによって、冒頭のPythonコードは以下のようになりました。

@app.route("/lifegame")
def lifegame():
    """ Conway's Game of Life """
    return render_template("lifegame.html")

注意点

• 使用している記号などによってはHTML Escapeにかけた上で貼り付ける必要があるかもしれません
• <code>タグの後に改行せずにソースコードを貼り付けないと、一行目が空白になるっぽいです
• コードの背景色を変える予定がないなら、先述の「デザインCSS」設定欄で指定してしまえばいいと思います

以上