highlight.jsの使い方入門

highlight.jsとは、Webページに掲載するソースコード等をシンタックスハイライトしてくれる、オープンソースのJavaScriptライブラリ。

公式サイトは https://highlightjs.org

highlight.jsによるシンタックスハイライトの例

シンタックスハイライトとは、ソースコードの可読性を高めるために、その文法の分類ごとに文字色を変えるなどすること。テキストエディタでは標準機能となっていることが多い。

ソースコードをWebページで紹介する際、シンタックスハイライトを手作業(CSSやHTMLのコーディング)で行うのはとても大変! highlight.jsはこれを自動でやってくれる。

こんな感じ。デザインや対応言語はたくさんある。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

highlight.js クイックスタート

  1. ダウンロード
  2. head要素内で外部ファイル(CSSとJavaScript)を指定し、呼び出し
  3. ソースコードはpre要素内のcode要素に書く

highlight.js ダウンロード

highlight.jsのダウンロードページで、対応言語を選んでから「Download」ボタン。

ダウンロードしたらunzipコマンドで解凍。 

unzip -d highlightjs highlight.zip

head要素内で外部ファイル(CSSとJavaScript)を指定し、呼び出し

選択できるデザインを参考にして、解凍したstyle/ディレクトリから好みのCSSファイルを見つける。JavaScriptファイルはhighlight.pack.jsという名前になっていた。

このCSSとJavaScriptファイルをHTMLのhead要素内で指定する。 

<link href="/CSSへのパス/default.css" rel="stylesheet">
<script src="/JavaScriptへのパス/highlight.pack.js"></script>

コンテンツデリバリネットワークを利用する場合

ダウンロードせず、コンテンツデリバリネットワークのライブラリを直接利用するなら、 

<!-- バージョン9.2.0の場合 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>

呼び出し

呼び出し(シンタックスハイライトの実行)はhead要素内などでこうする。 

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

ソースコードはpre要素内のcode要素に書く

ソースコードの言語は基本的に自動対応だが、うまくいかないなら、code要素のclass属性で言語を指定。例えばHTMLなら、 

<pre><code class="html">ここにソースコード</code></pre>

ハイライトしたくないものは、nohighlightと指定。 

<pre><code class="nohighlight">ここにソースコード</code></pre>

ソースコードがHTMLの場合、タグで使う<と>は文字参照で&lt;と&gt;と記述。例えば<hr>というコードなら、 

<pre><code>&lt;hr&gt;</code></pre>

他言語、ファイルのハイライト例

# Bash
if [ $? = 0 ]; then
  echo "こんにちは"
fi
// JavaScript
if (true) {
 console.log('こんばんは')
}
/* CSS */
em, dfn {
  font-weight: bold;
}
# SQL
select * from テーブル order by id;
# Access log
111.222.333.444 - - [18/Mar/2022:12:34:56 +0900] "GET /robots.txt HTTP/1.1" 404 327 "-" "Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)"