【Blogger】コード表示に highlight.js を導入してみた

ブログにちょっとしたソースコードを掲載するときに、簡単で良い感じに表示してくれるツールはないだろうかと探したところ highlight.js が良さそうだったので導入しました。

導入はとても簡単。手順をまとめます。

目次

highlight.js のコードをテンプレートに設置

https://highlightjs.org/にアクセスし、「Get version ●●」のボタンをクリック。

cdnjs の欄に表示されているコードをコピー。

一旦テキストエディタに貼り付け、default.min.css の最後に / を入れる。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

もう一度 highlightjs.org トップ画面に戻り、「Get version ●●」の下にある「Usage」をクリック。

表示されたコードの一番下の行をコピー。

highlight.js usage

先ほどのコードと合わせてこんな感じにする。

<link rel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

ソースコードの </body> 直前に設置して、保存 。

終わり!

デザインを選択し、コードを修正

背景色や文字色は豊富に用意されていて、自分の好みのデザインに変更できます。
https://highlightjs.org/static/demo/

上記サイトでデモが確認できるので、好きなスタイルを選ぶ。

以下サイトから選んだスタイルに対応するCSSを探し、CSS名をコピー。
https://github.com/highlightjs/highlight.js/tree/master/src/styles
例えば「A 11 Y Dark」を選んだ場合は「a11y-dark」をコピー

デフォルトのソースコードで default.min.css となっている部分を、a11y-dark.min.css に修正。

サイトに合わせて CSS を修正

このままでも使えますが、当ブログでは以下のCSSを加えて使っています。サイトに合わせて設定してみてください。

pre code.hljs {
    font-size: 14px;
    line-height: 1.4;
    max-height: 500px;
}

max-height でボックスの高さを指定すると、入りきらない部分は縦のスクロールになります。

以上です。

導入にあたっては以下サイトを参考にさせていただきました。

コードの掲載方法

コードは、以下のようにしてブログに掲載します。

  1. 掲載したいコードを、表示用に変換する。
    HTML特殊文字変換ツール
  2. 変換したテキストを、以下のタグで囲む。
    <pre><code>ここにコードを入力</code></pre>

追記:コピーボタンを設置しました(2021/3/15)

コードにマウスオーバーをするとコピーボタンが表示されるよう変更しました。

COPYボタン

以下サイトを参考にさせていただきました。

スクリプトは IB-Note さんのもの、コピーボタンのデザインはふじろじっくさんのものを参考にさせていただいています。


※追記(2021/9/28)
現在、当ブログでは highlight.js を使用していません。コピーボタンのみ使用中です。

次の記事 前の記事