ブログ初心者・Web制作の情報サイト
シンタックスハイライト highlight.jsの使い方

シンタックスハイライト highlight.jsの使い方

highlight.jsはJavaScriptで書かれたWebブラウザで使えるシンタックスハイライト用のスクリプトです。フレームワークに依存しない独立したスクリプトで自動でコードの言語を識別し色分けする特徴を持っています。

この記事ではhighlight.jsの使い方と導入方法を紹介していきます。

highlight.jsを使用するための準備

highlight.jsを使用する方法はCDNサービスを利用しWebから読込む方法ファイルをダウンロードしてローカルに置く方法の2通りがあります。

CDNサービスを利用しWebから読み込む方法は手軽に利用できます。一方ファイルをダウンロードしてローカルに置く方法はhighlight.jsのサイズを軽く抑えページ読込みの負荷を軽減できます。2つの内から自分に合った方を選んで使用してください。

CDNサービスを利用しWebから読み込む方法

CDNはWeb経由でサービスを提供するシステムです。

CDNサービスを利用することで自分でファイルをダウンロードすることなくhighlight.jsを読み込み簡単にシンタックスハイライト機能を利用できるようになります。

highlight.jsのCDNで利用できる言語は次の38種類です。38種類でhighlight.js(10.1.1)のファイルサイズは98kb程になります。

.properties Apache config Bash C
 C# C++ C-like CSS
 Diff Go HTML, XML HTTP
 JSON Java JavaScript Kotlin
 Less Lua Makefile Markdown
 Nginx config Objective-C PHP PHP Template
 Perl Plain text Python Python REPL
 Ruby Rust SCSS SQL
 Shell Session Swift TOML, also INI TypeScript
YAMLCoffeeScript

CDNはcdnjs・jsdelivr・unpkgが利用できます。どれかのコードをコピーしてHTMLに貼り付てください。

cdnjs

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

jsdelivr

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js"></script>

unpkg

<link rel="stylesheet"
      href="//unpkg.com/@highlightjs/cdn-assets@10.7.1/styles/default.min.css">
<script src="//unpkg.com/@highlightjs/cdn-assets@10.7.1/highlight.min.js"></script>

ファイルをダウンロードしてローカルに置く方法

自分でファイルをダウンロードして利用する方法です。手間がかかりますが使用する言語を自由に選べるため無駄がなくhighlight.jsのサイズを軽くできる利点があります。

実際にCDNで提供される38種類すべて利用することはほとんど無いと思います。ページ読込みの負荷を少しでも軽減するためにこちらの方法がおすすめです。

言語の選択

カスタムパッケージが利用できます。Custom packageの項目で使用する言語を選択しダウンロードしてください。言語の種類はとても多く190種類近くあります。

highlight.js

highlightjs:言語の選択

ダウンロードしたファイルをサーバーにアップロードする

ダウンロードしたhighlight.zipを解凍します。

シンタックスハイライトに必要なファイルはhighlight.pack.jsと色分け用のCSSの2つだけです。CSSはstyleフォルダの中に大量に入っています。使用するのは1つだけなので好みのCSSを選んでください。

後はhighlight.pack.jsとCSSをサーバーにアップロードし読み込むためのタグをページに追加すればインストールは完了です。

テーマ色の確認

highlight.pack.jsのテーマ色は全部で94スタイルです。highlight.pack.jsのCSSテーマ色を確認したい場合は以下のページでStylesの項目からをテーマを選択すると色を確認できます。

highlight.js demo

highlight.jsテーマ色の確認

highlight.jsの使い方

highlight.jsの使い方はinitHighlightingOnLoad()を呼ぶだけです

initHighlightingOnLoad()はver10.6で廃止されました

ver10.6以降を使う場合はhighlightAll()を使用してください。下記の<script>タグをシンタックスハイライトしたいページに追加します。

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

この関数は<pre><code>タグ内の言語を自動的に検知して色分けを可能にします。

CSSクラスを追加して言語を指定する

もしhighlight.jsがコードの言語を自動的に検知できない場合はCSSクラスを付与することで手動で指定することができます。思ったように言語を検知してくれない場合もあるので最初から指定しておくのもアリです。

指定はシンプルに言語名をクラスとして指定します。

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

もしくはlanguage-xxxx lang-xxxxでも可能。

<pre><code class="language-html">...</code></pre>
<pre><code class="lang-html">...</code></pre>

ハイライトの無効化

ハイライトしたくない場合の記述方法です。plaintextとnohighlightの2種類があります。それぞれ「plaintext」と「nohighlight」CSSクラスが追加されます。

<pre><code class="plaintext">...</code></pre>
<pre><code class="nohighlight">...</code></pre>

行番号の追加

highlight.js自体には行番号を追加する機能はありませんがプラグインを使用すれば可能になります。CDNでプラグインを利用するためのタグを書いておきます。詳しくは下記リンク(GitHub)を参考にしてください。

CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

highlightjs-line-numbers.js – GitHub

highlight.jsの適用範囲をコントロールしたい

highlight.jsではハイライトを適用する要素を変更することができます。デフォルトでは<pre><code>タグ内のコードに対してhighlight.jsが適用されますが highlightBlock()を利用して変更可能です。

以下はVanilla JSを使った initHighlightingOnLoad()と同様の使い方ができる関数です。querySelectorAll()内の引数を変更すれば適用する要素を変更できます。

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

CSSで見た目を調整する

highlight.jsはシンプルなのですがCSSでフォントは設定されておらずコードのフォントはサイトの設定と同じになります。Windows日本語環境の場合、游ゴシックやメイリオになってしまい見栄えが悪いです。これらのフォントはコードに合いません。

この辺りはユーザーに任せられているようなので見やすく変更しましょう。

CSSでフォントを変更します。font-sizeとline-heightはお好みでどうぞ。

pre code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

pre {
  font-size: 14px;
  line-height: 1.2;
}

font-familyで指定しているフォントはそれぞれ下記のOSで標準として搭載されているのでほとんどのデバイスをカバーできます。フォントもコード表示に適していて見やすいですよ。

  • Consolas:Windows
  • Monaco:Mac OSX
  • Andale Mono:Mac
  • Ubuntu Mono:Ubuntu

最後に

highlight.jsの使い方と導入方法を紹介しました。

highlight.jsは素朴で控えめな感じのシンタックスハイライトです。過度に装飾しません。爆速軽量を謳うPrism.jsと比べてもCSSの色分けは抑えめで良く言えばシンプル悪く言えば雑です。しかし言語の自動識別は結構便利な印象でした。使用言語を減らせばファイル自体はかなり軽くなるので悪くないです。

シンタックスハイライト探している人は一度使用してみてはどうでしょうか。