highlight.js で独自言語の色付けを追加

次の関数を実行して、ソースコードを保持する element を highlight.js で解析する。

hljs.highlightBlock( element );

このとき element の class は、 language-言語識別 として定義しておく。 例えば LuneScript は language-lns としている。

なお、 highlight.js の使用方法として次の関数を実行する方法が紹介されているが、

hljs.initHighlightingOnLoad();

この関数は全ての <pre><code> element を解析対象としてしまう。

今回は、 LuneScript 以外の言語を hugo で解析済みなので、 全ての <pre><code> を解析対象にしてしまうと 2 重解析になってしまうため、 hljs.highlightBlock( element ); で解析する element を明示的に指定する。

hljs.highlightBlock( element ); によって highlight.js による解析が行なわれるが、 まだこの状態では highlight.js は独自言語に対応していない。 そこで、highlight.js に独自言語の情報を事前に登録しておく。

highlight.js へ独自言語を登録するには次の関数を利用する。

hljs.registerLanguage( langName, langDef )

ここで、 langName は前述の language-言語識別 の 言語識別 部分を指す。 つまり language-lns の場合 "lns" を langName に使用する。 langDef は、次のような関数オブジェクトを指定する。

function( obj ) {
   return {
      keywords: "hoge foo bar"
   };
}

つまり、まとめると以下のようになる。

hljs.registerLanguage( "lns", function( obj ) {
   return {
      keywords: "hoge foo bar"
   };
});

上記の langDef で定義する関数オブジェクトは、 言語情報を定義するオブジェクトを返す。

このオブジェクトの詳細は次の URL に記載がある。

<https://highlightjs.readthedocs.io/en/latest/mode-reference.html>

以降では、良く使う属性について説明する。

まず、言語情報定義オブジェクトが何を定義するものかを説明する。

highlight.js は、ソースコード内の文字列を解析し、 「どの文字列」が「何の種別」かを判別する。

このオブジェクトは、「どの文字列」「何の種別」を定義するのが役割である。

たとえば、 C 言語では for, while, if などの文字列の種別は予約語(keyword) であり、 /* */ で括られている文字列の種別はコメント(comment) である。

次のオブジェクトを返すことで、for, while, if を keyword として定義できる。

   return {
      contains: [
        {
	    className: "keyword",
	    keyword: "for while if"
        }
      ]
   };

ここで className は、 for while if が keyword であることを示す。

この定義のよって、 highlight.js は解析対象のソースコード内の for を、次のように変換する。

<span class="hljs-keyword">for<span/>

highlight.js は、上記オブジェクトの className で指定した名前を span element のクラス名として使用する。

この例の場合 className: "keyword" で定義したクラス名は、 "hljs-keyword" となる。 仮に className が "hoge" ならば、 "hljs-hoge" となる。

このように 言語情報オブジェクトで定義した各文字列にクラスが指定されるので、 CSS によって hljs-keyword に色を指定することでソースコードの色付けが可能になる。

なお、 className は任意の文字列を定義可能だが、 もし将来独自言語の対応を highlight.js に pull request したい、 という思いがあるならば、 highlight が既に対応している言語に合せて className を利用するべきだろう。

{
   contains: [
      { className: "keyword", begin: /hoge|foo|bar/ }
   ]
}

{
   contains: [
       {
           className: "keyword",
           begin: /abc/,
           end: /ij/,
           contains: [ 
               { className: "meta", begin: /ef/ }
           ]
       }
   ]
}

abc defgh ijk

<span class="hljs-keyword">abc d<span class="hljs-meta">ef</span>gh ij</span>k

参考までに、 highlight.js に LuneScript を追加登録するスクリプトを載せておく。

<script src="https://ifritjp.github.io/documents/js/highlight_lns.js"></script>
<link rel="stylesheet" href="https://ifritjp.github.io/documents/css/highlight_lns.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>

LuneScript のソースを保持する element の class は、 language-lns として指定する必要がある。