highlight.jsで一番簡単にハイライト

プログラムの構文をハイライトするシンタックスハイライトでは、google-code-prettifyが使われているのを見ますが、google-code-prettifyはコードが変更になったり、フォルダが変更になったりしているので、もっと簡単にできるhighlight.jsを使っています。

highlight.jsのダウンロードページに、以下のコードがあります。

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

これと、How to use highlight.jsのページにある以下のコードを<head></head>内に入れるだけで、<pre><code></code></pre>内のソースコードをハイライト表示できます。

<script>hljs.initHighlightingOnLoad();</script>

これがhighlight.jsで一番簡単なハイライト表示です。

ただし、サイトのパフォーマンスを重視するなら、<head></head>内には、<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">だけを入れて、<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>と、 <script>hljs.initHighlightingOnLoad();</script>は、<body>の閉じタグの</body>の直前に置いたほうがいいです。

highlight.jsのcdnjsで表示されるソースコードの背景色は、https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.cssを見ると、その中のbackground:#F0F0F0です。#f0f0f0はrgb(240,240,240)と同じ色です。

pre { background-color: #f0f0f0; }

ソースコードの背景色とサイトの色がずれている時には、このpreへのCSSでの背景色指定で合わせることができます。highlight.jsの9.12.0は、2017-05-30時点での最新版で、それ以後に更新された時にはhighlight.jsのダウンロードページで、最新版のcdnjsに変更します。

サイトごとに、CSSのpaddingやmargin設定が違うので、ソースコードとサイトの調整はpreにCSSを設定して、適宜調整します。実体参照へ変更しないといけないのは、<pre><code></code></pre>と同じです。実体参照への変換サイトが無料であるので、そこで変換すると簡単です。