WEB上のソースコードに、シンタックスハイライトを導入(highlight.js)

目的

読みやすさ向上のため、記事内に書くプログラムコード等に、シンタックスハイライトをつけたい。

導入するライブラリ

highlight.jsを導入します。

ダウンロード

TOPページのGet version XX.XX.XXをクリックします。

移動先のページで、

• CDNを利用する
• ダウンロードする
• npmからインストールする

についての説明があります。
今回は、ダウンロードで利用しますので、「Custom package」のところまでスクロールします。

ここで、必要な言語を含めた分でダウンロードできます。
必要最小限に絞ることで、容量を減らすことにも繋がります。
(追加する時は、選択を増やして改めてダウンロードすれば良いので)

チェックできたら、ダウンロードボタンを押して、zipファイルを取得。
解凍後、任意の場所に設置します。

例：Laravelを利用して作った当ブログの場合

+ public
  + js
    + highlight
      + styles
        + atom-one-dark-reasonable.min.css
      + highlight.min.js

テーマの選択

スタイルを選択します。
デモページがあるので、確認して使用するテーマを決めます。

HTML側の対応

HTML側で、jsとテーマCSSを読み込みます。
以下は、このブログにて実装した際の記述です。

    {{-- コードハイライト --}}
    <link rel="stylesheet" href="{{ asset('/js/highlight/styles/atom-one-dark-reasonable.min.css') }}">
    <script type="text/javascript" src="{{ asset('/js/highlight/highlight.min.js') }}" charset="UTF-8"></script>
    <script>hljs.highlightAll();</script>

2022-06-20 09:00:00