コードをハイライトするライブラリ「highlight.js」

ブログのリニューアルに伴い、コードを綺麗に表示するために使用していたプラグイン「Crayon Syntax Highlighter」を停止して、軽量と評判の「highlight.js」を導入しました。
ハイライトのスタイルもたくさんあるので、自分のサイトの雰囲気に合ったものを選べてオススメです。

目次

  • 必要なファイルを読み込む
  • CSSのスタイルを選ぶ
  • ページに表示する

Advertising

必要なファイルを読み込む

今回はCDNを使って必要なファイルを読み込みました。 「How to use highlight.js」を見ると最低限使用するには以下の3行を読み込むとあります。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

私はこれをCDNを使って読み込みたいので

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

と書き換えました。
CDNのホスト先URLは「Getting highlight.js」から取得できます。

CDNのパッケージにはhighlight.jsが対応している全ての言語が入っているわけではないとのことですが、私が使いたいのは今の所HTML、 CSS、JavaScript、PHPくらいなのでCDNパッケージで問題ありません。
「Custom package」の「Common」にある言語がCDNのパッケージに含まれている言語です。SCSSも含まれていますね。

CSSのスタイルを選ぶ

highlight.js demo」からスタイルのデモを確認できます。 左上の「Language categories」で言語を選択、その下の「Styles」でスタイルを選択。右側に表示されているコードの色が変わります。

使用したいスタイルが決まったら、読み込んでいるCSSのdefault.min.cssの部分を書き換えます。
私は「Styles」の中から「A 11 Y Light」を選んだので以下のようになります。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/a11y-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

スタイルの名前の全て小文字でスペースはハイフン(-)でつなげばOKですが、心配な場合は「highlight.js demo」のソースを見ると、CSSのファイル名を確認できます。

ページに表示する

ハイライトされたコードを表示するには<pre><code> ... </code></pre>で囲みます。
WordPressの場合は「フォーマット」の「ソースコード」ブロックでOKです。

highlight.jsは自動で言語を検出しますが、自動検出されない場合はclassで言語を指定できるそうです。

<pre><code class="html">...</code></pre>

Author

すずき のりえ
@planbworks

Webデザイナー / グラフィックデザイナー / エイチレフ合同会社 業務執行社員
コーポレートサイト・リクルーティングサイト、会社案内・入社案内がメインです。最近では医療・福祉系のお客様が多いです。
母校の専門学校で非常勤講師(DTP / 2015年10月〜, Web / 2021年10月〜)。2017年3月よりお茶のお稽古に通っています(裏千家)。

関連記事