シンタックスハイライトはHighlight.jsだけで足りるのか

はじめに

技術ブログや社内Wikiにコードサンプルを載せるとき、「言語ごとにハイライト用ライブラリを選定するのが面倒」「対応言語が少なくて結局CSSを自作する羽目になった」と感じたことはないでしょうか。コードの可読性はそのまま記事やドキュメントの信頼性に直結するため、ここで妥協したくないという方は多いはずです。

そんな悩みに対する答えの一つが、長年にわたって使われ続けている構文ハイライトライブラリ「Highlight.js」です。この記事では、Highlight.jsが今も選ばれ続ける理由と、実際に手を動かして試せる使い方を紹介します。

Highlight.jsとは

Highlight.jsは、ブラウザ上やNode.js環境でコードに構文ハイライトを適用するJavaScriptライブラリです。外部依存を持たず、180以上の言語に標準対応しているのが最大の特徴で、サードパーティ製の言語定義を追加すればさらに幅広い言語に対応できます。

主な特徴

自動言語検出 - 言語を指定しなくても、コードの内容から自動的に言語を推測してハイライトしてくれます
豊富なテーマ - 100種類近い配布テーマが用意されており、CSSを差し替えるだけで見た目を変更できます
ゼロ依存 - 他のライブラリに依存しないため、既存のプロジェクトに組み込みやすい設計になっています
ブラウザ・サーバー両対応 - フロントエンドでの動的ハイライトだけでなく、Node.js側でのビルド時ハイライトにも利用できます

インストール

npmまたはyarnからインストールできます。

npm install highlight.js

yarn add highlight.js

CDN経由で読み込む場合は、cdnjsやjsDelivr、unpkgのスクリプトタグをそのまま利用することも可能です。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>

基本的な使い方

もっともシンプルな使い方は、ページ内のすべての<pre><code>要素を自動でハイライトする方法です。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
</head>
<body>
  <pre><code class="language-javascript">
    function greet(name) {
      return `Hello, ${name}!`;
    }
  </code></pre>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
  </script>
</body>
</html>

npmでインストールした場合は、モジュールとして読み込んで使います。

import hljs from "highlight.js";
import "highlight.js/styles/github.css";

hljs.highlightAll();

言語を明示せずに自動検出させたい場合は、highlightAutoを使います。

import hljs from "highlight.js";

const code = `
const sum = (a, b) => a + b;
console.log(sum(1, 2));
`;

const result = hljs.highlightAuto(code);
console.log(result.language); // 検出された言語名
console.log(result.value);    // ハイライト済みのHTML文字列

実践的なユースケース

Node.jsのサーバーサイドでMarkdownをHTMLに変換する際、コードブロックにハイライトを適用する例を見てみましょう。ここではhighlight関数を使い、指定した言語で確実にハイライトを行います。

import hljs from "highlight.js";

function renderCodeBlock(code, language) {
  if (language && hljs.getLanguage(language)) {
    const { value } = hljs.highlight(code, { language });
    return `<pre><code class="hljs language-${language}">${value}</code></pre>`;
  }

  const { value, language: detected } = hljs.highlightAuto(code);
  return `<pre><code class="hljs language-${detected}">${value}</code></pre>`;
}

const sample = "SELECT id, name FROM users WHERE active = true;";
const html = renderCodeBlock(sample, "sql");
console.log(html);

このように、CMSやブログの静的サイトジェネレーターと組み合わせることで、記事投稿時にサーバー側でコードブロックをハイライト済みHTMLへ変換し、クライアントには余計なJavaScriptを送らずに済ませる構成が作れます。フロントエンドの表示速度を優先したい技術ブログやドキュメントサイトとの相性が良い使い方です。

まとめ

Highlight.jsは、ゼロ依存で180以上の言語に対応し、自動言語検出まで備えた息の長い構文ハイライトライブラリです。ブラウザでの動的な組み込みから、Node.js側でのビルド時ハイライトまで柔軟に対応できるため、「まずはシンプルに導入したい」という場面から「サーバーサイドで最適化したい」という場面まで幅広く使えます。コードを見せる場面で迷ったら、まずHighlight.jsを試してみてはいかがでしょうか。