はてなブログで「Highlight.js」を使う

はてなブログに標準で実装されているシンタックス・ハイライト（ソースコードの色分け機能）のビビットな配色を、ブログの雰囲気に合わせてもっと落ち着いた色に変えたくなったんだけど…。

色を変えるには、要素をくくる class 付きの span の color を変更するだけで良いのです。ただ、ソースコードの装飾は”赤・緑・青など様々な色を使って配色し分かりやすくする”のが大原則。

モノトーンな配色しかできない自分にはハードルが高い。

そこで、はてなブログに標準で実装されているシンタックス・ハイライトの使用を止め、jQuery で動作する Hightlight.js を使うことにしました。ページの読み込み速度にほとんど影響を与えない軽量さとデザインの豊富さが魅力です。

使用する方法

JQuery 本体とライブラリ、スタイルシートを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/androidstudio.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>

Highlight.js とそのスタイルシート、また、動作に必要な jQuery 本体を Google APIs から読み込みます。記載する場所は、［設定］→［詳細設定］→［head に要素を追加］です。

Highlight.js には様々なデザインが用意されています。変更する場合は、2行目の末尾 androidstudio の部分を使用したいデザイン名に書き換えます。

ライブデモは Highlight.js 公式サイトのこちらのページで表示できます。また、書き換えるデザイン名は、github のこちらのページにあるファイル名を参照してください。

jQuery の命令文を追記する

<script>
$(document).ready(function() {
    $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});
</script>

pre code に対して適用されるシンタックス・ハイライトを、単なる pre でも動作するように変更します。

CSS を調整する

.hljs {
    padding: 1.7em!important;
}

[head に要素を追加]で追加したスタイルシートは、はてなブログテーマのスタイルシートより後に読み込まれるので、余白や一部のスタイルが崩れる場合があります。崩れを防止するには、崩れてしまった部分の CSS をカスタムCSS欄で important 指定します。