ソースコードの表示に 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」をクリック。
表示されたコードの一番下の行をコピー。
先ほどのコードと合わせてこんな感じにする。
<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 でボックスの高さを指定すると、入りきらない部分は縦のスクロールになります。
以上です。
導入にあたっては以下サイトを参考にさせていただきました。
コードの掲載方法
コードは、以下のようにしてブログに掲載します。
- 掲載したいコードを、表示用に変換する。
HTML特殊文字変換ツール - 変換したテキストを、以下のタグで囲む。
<pre><code>ここにコードを入力</code></pre>
追記：コピーボタンを設置しました
コードにマウスオーバーをするとコピーボタンが表示されるよう変更しました。
以下サイトを参考にさせていただきました。
追記：コピーボタンを以下サイトの仕様に変更しました。
追記：その後、highlight.js の利用は取りやめました。
ソースコードを掲載している記事が少なく、わざわざ highlight.js を読み込むほどでもないかなと思い直したため。コピーボタンのみ使用中です。