Webサイトにhighlight.jsを導入してコードを見やすくする

このブログでコードを見やすくするためにhighlight.jsを導入しました。npmで インストールしてwebpackを使う形で導入したので、方法をまとめておきます。

highlight.jsについて

highlight.jsはhtml上でシンタックスハイライトをするためのライブラリです。手軽に導入できて、自動的に言語の判定を行い、ハイライトしてくれるので便利です（コードの断片だと誤検出も結構ありますが）。

インストール方法はこちらのページにあるようにいくつかあります。このブログの場合、既にcssとjsはwebpackを利用して生成しているので、npmでインストールして、既存の環境に組み込む形で使うことにしました。

インストール

前提

webpackを使用できる状態を前提としています。webpackの導入は以下の記事に記載しています。

purecss-sass (Pure CSS for Sass) を導入する

ディレクトリ構造は以下の通りです（過去記事とは出力先の名称が異なります）。

assets/    # 出力
    css/
    js/
src/       # ソース
    sass/
        style.scss
    index.js
node_modules/
package.json
package-lock.json
webpack.config.js

webpack.config.jsに関してもoutputのみ異なります。

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'assets'),
    filename: 'js/main.js'
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true }
            }
          ],
        }
      })
    ],
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
          }
        ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    }),
  ]
};

作業

まず以下のコマンドでインストールします。

$ npm install --save-dev highlight.js

CSS

node_modules/highlight.js/scss/の中で好きなスタイルファイルを選んでsrc/sass/style.scssにてimportします。自分はVS Codeユーザーなのでvs2015.scssにしました。

@import '~highlight.js/scss/vs2015.scss';

JS

node_modules/highlight.js/lib/languages/下に言語毎にファイルがあります。使用する言語を決めたら、src/index.jsにてそれぞれimportし、登録します。以下サンプルです。

// 共通
import hljs from "highlight.js/lib/core";

// 使用する言語
import bash from "highlight.js/lib/languages/bash";
import css from "highlight.js/lib/languages/css";
import dockerfile from "highlight.js/lib/languages/dockerfile";
import javascript from "highlight.js/lib/languages/javascript";
import json from "highlight.js/lib/languages/json";
import php from "highlight.js/lib/languages/php";
import phpTemplate from "highlight.js/lib/languages/php-template";
import plaintext from "highlight.js/lib/languages/plaintext";
import scss from "highlight.js/lib/languages/scss";
import shell from "highlight.js/lib/languages/shell";
import sql from "highlight.js/lib/languages/sql";
import typescript from "highlight.js/lib/languages/typescript";
import xml from "highlight.js/lib/languages/xml";
import yaml from "highlight.js/lib/languages/yaml";

// 使用する言語の登録
hljs.registerLanguage("bash", bash);
hljs.registerLanguage("css", css);
hljs.registerLanguage("dockerfile", dockerfile);
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("json", json);
hljs.registerLanguage("php", php);
hljs.registerLanguage("php-template", phpTemplate);
hljs.registerLanguage("plaintext", plaintext);
hljs.registerLanguage("scss", scss);
hljs.registerLanguage("shell", shell);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("typescript", typescript);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("yaml", yaml);

// ハイライト処理
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('pre code').forEach(function (block) {
    hljs.highlightBlock(block);
  });
});

ビルド

以下を実行します。

$ npm run build

assets/js/main.jsとassets/css/style.cssが生成されます。これらを使えば<pre><code></code></pre>のブロックが自動的にハイライトされます。

確認

すでにこの記事もハイライトされているはずなので効果は明らかですが、実際の過去記事のキャプチャが以下です。

いい感じです。VS Codeっぽいです。

まとめ

highlight.jsを導入しました。以前の白黒と比べると見やすくなったと感じます（特にVS Codeユーザーには）。ビルド環境が元々あったこともあり、簡単に導入できて良かったです。ただJSでシーケンシャルに処理しているので、コードのブロックが増えると、表示が重くなりそうなのが気になりました。