はじめに
ブログにソースコードを載せるとき、色が付いていないと読みづらいものです。highlight.js を使えば、<pre><code> で囲んだコードを、言語を自動判定してきれいにシンタックスハイライトしてくれます。CDN から読み込むだけで導入でき、静的サイトとも相性が良いので、Jekyll のブログに組み込んでみます。
導入手順
1. ライブラリを読み込む
<head> などにスタイルシートとスクリプトを追加します。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
テーマは 240 種類以上あります。好みのものを選んで、CSS の URL を差し替えてください。
2. ハイライトを有効にする
ページ読み込み後にハイライトを実行します。
<script>hljs.highlightAll();</script>
以前よく使われていた
hljs.initHighlightingOnLoad()は 11.x 系で非推奨になりました。代わりにhljs.highlightAll()を使ってください。
これで、ページ内のすべてのコードブロックが自動的にハイライトされます。