highlight.jsとは、Webページに掲載するソースコード等をシンタックスハイライトしてくれる、オープンソースのJavaScriptライブラリ。
公式サイトは https://highlightjs.org
シンタックスハイライトとは、ソースコードの可読性を高めるために、その文法の分類ごとに文字色を変えるなどすること。テキストエディタでは標準機能となっていることが多い。
ソースコードをWebページで紹介する際、シンタックスハイライトを手作業(CSSやHTMLのコーディング)で行うのはとても大変! highlight.jsはこれを自動でやってくれる。
こんな感じ。デザインや対応言語はたくさんある。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
highlight.jsのダウンロードページで、対応言語を選んでから「Download」ボタン。
ダウンロードしたらunzip
コマンドで解凍。
unzip -d highlightjs highlight.zip
選択できるデザインを参考にして、解凍した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>
ソースコードの言語は基本的に自動対応だが、うまくいかないなら、code
要素のclass
属性で言語を指定。例えばHTMLなら、
<pre><code class="html">ここにソースコード</code></pre>
ハイライトしたくないものは、nohighlight
と指定。
<pre><code class="nohighlight">ここにソースコード</code></pre>
ソースコードがHTMLの場合、タグで使う<
と>
は文字参照で<
と>
と記述。例えば<hr>
というコードなら、
<pre><code><hr></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)"