![ソースコードの表示に highlight.js を導入してみた](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqFBxGybd9QNqphQQW7oQYvBWedutG6wQKJMXFsyQNBHnfyhWeTROouSEU2a3SU3xGTzRopcVMb6b9Dqrp1jH6-RyB9Rr2-g2xA3hLLmjAimxiUTrMJVZTRhIy6XB6Ry3EUeq6iU3eVQPa/s0-e365-rw/eyecatch-highlightjs.png)
ソースコードの表示に highlight.js を導入してみた
![ソースコードの表示に highlight.js を導入してみた](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqFBxGybd9QNqphQQW7oQYvBWedutG6wQKJMXFsyQNBHnfyhWeTROouSEU2a3SU3xGTzRopcVMb6b9Dqrp1jH6-RyB9Rr2-g2xA3hLLmjAimxiUTrMJVZTRhIy6XB6Ry3EUeq6iU3eVQPa/s0-e365-rw/eyecatch-highlightjs.png)
ブログにソースコードを掲載するときに、簡単で良い感じに表示してくれるツールはないだろうかと探したところ highlight.js が良さそうだったので導入しました。
導入はとても簡単。手順をまとめます。
目次
highlight.js のコードをテンプレートに設置
https://highlightjs.org/にアクセスし、「Get version ●●」のボタンをクリック。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CLni8K6-6huHLlhzByy8_K6EmWvQC_eYML_B4zYeOd5dgZH2tGa2Oc6TfrmbL9Mz4IUzH7Ow1q8r6dSzdUydJyPrwWjl-e3XUIP3cwKtVI5GMDeI7PGRe5Fjd5ths7f9QGtnCljmxTKe/s0-e365-rw/highlightjs_1.png)
cdnjs の欄に表示されているコードをコピー。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73ReFUUOqlRqzC3xC0f9gbZM1ewn4ipE6MIfIhvY0Tw8LS_6x-Lrz1VBP2ksa3Da3DvXXuGCfuFCRf-CWWIriTPTpkPT0p2D2NjWIBLVOldcfYcbJ6Tpd8N1xwmtQXkFRQGRPvZTzCATQ/s0-e365-rw/highlightjs_2.png)
一旦テキストエディタに貼り付け、.../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」をクリック。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjia2vSFwan21SXdocYRSgh5BI1WFwk8FKD23n9fY01LM-KRR4Dbb6fqtWY1cXecH8lUrMboCS6wqZju2rC1MvKcODw4Zdy12N_raF-NGVlQa8JvYMgKTe7Lc5FS2EFcOyOyRSfBGZKnNFl/s0-e365-rw/highlightjs_3.png)
表示されたコードの一番下の行をコピー。
![highlight.js usage](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFI5dAFrMXuMyvptBtDMumHm6Xei5h8Lv-YeQC9QuV6x4WkPJI62tNeDq-6hnfC1uBLlK3PSxaEGlxxeJX36AgbI5gsy_1NDX_CNndxYyIeUhl5E9bn-cZB08gVBaUyDlOiWInAs9crnv/s600-e365-rw/highlight.png)
先ほどのコードと合わせてこんな感じにする。
<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/
上記サイトでデモが確認できるので、好きなスタイルを選ぶ。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GTEdY_7tys4ywXDxTS8h_JeIUTJ9SrgGjpGFLWiEelAECoB8F436GiftvZ4QKvGFnH9tdj0Yvi9Zwuzb2XCdb29n9gs1Vskf8jxJEifV6pjrnyyN2HHJHxmhrLGGH_Ikv0BbeGE8Wdit/s600-e365-rw/highlight_5.png)
以下サイトから選んだスタイルに対応する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>
追記:コピーボタンを設置しました
コードにマウスオーバーをするとコピーボタンが表示されるよう変更しました。
![COPYボタン](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FYJsARIfMwU2kR1oIRVLF_qyYp0foZ4uE4KI-g__dbCaeXP5teyF9J9QhtNlojdet8H0PmjTwc_V-lAnsI8sY-0IDiBjxq2OxYFKJURCtAYBEDocKIslXvQr_Kk2LtOClLAzB_5n_p2m/s0-e365-rw/copybutton.png)
以下サイトを参考にさせていただきました。
追記:コピーボタンを以下サイトの仕様に変更しました。
追記:その後、highlight.js の利用は取りやめました。
ソースコードを掲載している記事が少なく、わざわざ highlight.js を読み込むほどでもないかなと思い直したため。コピーボタンのみ使用中です。