highlight.jsとは?コードに色をつける仕組み

コードが「色つき」で表示される、あの仕組み

技術ブログや公式ドキュメントでプログラムのコードを見ると、文字列は赤っぽい色、予約語は青や紫、コメントはグレー……というふうに色分けされていることが多いですよね。あれを自動でやってくれるのが highlight.js というライブラリです。

名前のとおりJavaScriptで書かれていて、Webページに読み込んでおくと、ページの中にあるコード部分を見つけて、自動的に色をつけてくれます。人間がひとつずつ「ここはキーワードだから青」と指定しなくていいのがポイントです。

やっていることを例えるなら

紙の資料に蛍光ペンで線を引く作業を想像してみてください。長い文章を読むとき、大事な単語だけ黄色、注意書きだけピンク、と色を分けておくと、あとから見返したときに一瞬で構造がつかめます。

highlight.jsがやっているのは、まさにこの「蛍光ペン係」の自動化です。ただし、ただ機械的に塗るのではなく、それがどのプログラミング言語で書かれたコードなのかを踏まえて塗り分けます。JavaScriptなら function や const がキーワードで、Pythonなら def や import がキーワード、というように言語ごとのルールを持っているわけです。

この「色分けして読みやすくすること」を、専門用語ではシンタックスハイライト(構文強調)と呼びます。エディタでコードを書いているときに色がついているのも、同じ考え方です。

色がつくと何がうれしいのか

正直、最初は「見た目がきれいになるだけでしょ」と思うかもしれません。でも実際に白黒のコードと色つきのコードを並べて読むと、差はけっこう大きいです。

• 文字列の閉じ忘れに気づきやすい。閉じクォートを忘れると、そこから先が全部「文字列の色」に染まるので、目で見てすぐわかります
• コメントと実際のコードを見分けやすい。コメントは薄い色になるので、読み飛ばしたいときに飛ばせます
• コードのかたまりの構造が視覚的につかめる。関数名や変数名がどこにあるかを、文字を1つずつ読まなくても把握できます

ざっくりした使われ方

Webページ側では、コードを pre と code というタグで囲んで書いておくのが基本の形です。highlight.jsはそこを見つけて、中の文字を細かく分解し、「これはキーワード」「これは文字列」「これはコメント」と種類ごとにタグで包み直します。

そのあと、実際に何色にするかはテーマ(配色ファイル)が決めます。highlight.jsには暗い背景用・明るい背景用など多くのテーマが用意されていて、サイトのデザインに合わせて選べます。つまり役割分担としては、

という流れになります。「分類する人」と「色を決める人」が別、と覚えておくと、あとで「色を変えたいときはテーマをいじればいいんだな」と自然に理解できます。

言語の指定について

highlight.jsは、指定がなくても「たぶんこの言語だろう」と推測してくれます。ただし短いコード片だと推測を外すこともあるので、あらかじめ言語を指定しておくほうが安定します。Markdownでコードブロックを書くときに、バッククォート3つのあとに js や python と書くことがありますよね。あの指定が、最終的にハイライト側へ渡される言語情報になります。

つまずきやすいところ

初心者がよく戸惑うのは、「色がつかない」ケースです。だいたい原因は限られていて、テーマのファイルを読み込み忘れている(分類はされているが色の指定がないので真っ黒のまま)か、コードを pre/code の形で書いていないか、指定した言語名が対応していないか、あたりです。

もうひとつ、< や & のような記号をそのまま書くとHTMLとして解釈されて表示が崩れることがあります。コードをページに埋め込むときは、これらをエスケープした形で置く必要がある、という点は覚えておくと後々ハマりません。

最後に

highlight.jsは、コードを「読める形」にするための裏方です。書く側が意識することはあまり多くなく、言語名をきちんと指定して、テーマを1つ選ぶ。それだけでドキュメントの読みやすさが一段変わります。技術記事を自分で書き始めると、このありがたみが実感できるはずです。