はてなブログで highlight.js を使う (Markdown記法向け)

TL;DR

  • Markdownモードで記事を書いている人は、 設定 > 詳細設定 > headに要素を追加 に以下を貼る。後は普通にmarkdownを書くだけ。
<!-- Highlight Theme -->
<!-- Theme list: https://highlightjs.org/static/demo/ -->
<!-- ref       : https://cdnjs.com/libraries/highlight.js/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css">

<!-- highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

<!-- Language Extension (Optional) -->
<!-- ref       : https://cdnjs.com/libraries/highlight.js/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/plaintext.min.js"></script>


<script>
document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("pre.code").forEach((block) => {
    hljs.highlightBlock(block);
  });
});
</script>
  • ハイライトしてほしくないときにはプレーンテキスト用の拡張を導入して(上の例では既に導入済み)言語名にplaintextを指定する。
  • 他のモードで書いてる人はしらない。
  • (追記) ちらつき回避についてはここを参照。

デフォルトテーマを卒業しました

昨日ちょっと長めのエントリを書いたときに思ったのですが、h4*1まで使うようなエントリはデフォルトのテーマ*2ではちょっと見づらいですね。h1とh2がほぼ同じ見た目な上、h3以下は下手すると本文と同化しますし。

そういうわけで、公式が出してる Bordeaux というテーマに乗り換えました。ついでに見出しの深さが分かりやすいようにちょっとだけスタイルを弄ったりして。素人があんまり弄ると折角のプロのデザインを壊してしまいそうなのでこの辺にしておきます。

本編

ところで、先のエントリで.batのシンタックスハイライトがイマイチだったので、highlight.jsを導入することにしました。

はてなブログに導入する方法もあちこちで共有されているようでしたが、若干噛み合わないところがあったので、一応メモを残しておきます。と言っても冒頭で全部言っちゃったんですけどね。

導入

CDNでホストされているので、ブログのヘッダをちょいちょいっと書き換えて導入します。必須なのはhighlight.min.jsと好きなハイライトテーマの*.min.cssです。ハイライトテーマはここから一覧できます。CSSのファイル名はテーマ名をケバブケースで書いたもので大体間違いないようですが、一部例外があるようなので、正確なファイル名は先程のcdnjsのページを確認してください。

次に、任意で言語拡張を導入します。CDN版で元々対応している言語はここの"Common"に書かれているものだけです。バージョン9.15.6時点の情報を引用すると:

ここにない言語は拡張を導入する必要があります。cdnjsから対応する*.min.jsを探してヘッダに加えてください。言語名plaintextでハイライトなしのテキストを扱えるプレーンテキスト拡張とか重宝します。

最後に、highlight.jsを走らせるコードを挿入すれば準備完了です。ところで、highlight.jsの Usage を見るとキックするためのコードはhljs.initHighlightingOnLoad();だということになっていますが、はてなブログをMarkdown記法で書いている場合はこれでは動きません。というのも、これは対象のコードブロックが<pre><code>...</code></pre>に囲まれているときの書き方で、はてなMarkdownが生成するコードブロック<pre class="code">...</code>*3とは合わないからです。はてなMarkdownで動かす場合には以下のようにする必要があります:

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre.code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

コードブロックを書く

後はただ普通にMarkdownを書くだけです。バッククォートの後の言語名を省略してもhighlight.jsは言語を推測してくれますが、間違いのないように言語名は添えておくべきでしょう。言語名のリストはここを参考にしてください。

以上！

追記

ちらつきが発生して鬱陶しいので回避策について書きました。

*1:小々々見出しのこと。

*2:Evergreen という名前のテーマでした。

*3:一部クラスや属性は省略してあります。