highlight.jsを言語毎にカスタマイズして使う

Last modified: 2019 年 01 月 21 日 13 時
highlight.jsのサンプル画像

まえがき

highlight.jsは、Webページでプログラムコードを強調&色付け表示させるためのJavaScriptです。対応言語の種類が多く、軽量です。当サイトでも、お世話になってます。最近やっと自分でカスタマイズして使えるようになったので、書き置きをば。また、ここでの環境はUbuntuを想定して書いています。

highlight.jsを使うには2通りの方法があります:

ここでは、後者をメインに書きますが、前者も簡単に解説します、[補足]パッケージをダウンロードせず、外部サーバーを利用する方法にて。

[このページのトップへ]

ソースのダウンロード

highlight.jsのGitHubを開きます。このページの"Clone or download"をクリックして、highlight.js-master.zipをダウンロードし、適当な場所で解凍します。

ダウンロード
[このページのトップへ]

カスタマイズとビルド

ダウンロードしたソースをビルドすれば、ハイライト(強調&色付け)されたソースコードの良好な表示を得られます。しかし、ここではScilab言語を例に、ハイライトされる語をカスタマイズしたいと思います。

当サイトでは、ScilabにKETpicというマクロを使用していることもあって、下図のようにKETpic特有の関数Setwindow, Paramplot, Listplotはハイライトされていません。そこで、KETpic特有の関数がハイライトされるようにしたいと思い至るわけです。

カスタマイズ前の表示

前項でダウンロードしたフォルダから、src/languagesフォルダを辿って、scilab.jsを探して開きます。20行目のreturnあたりからハイライトされるキーワードの指定がされています。ここを次のように書き換えます:

return {
        aliases: ['sci'],
        lexemes: /%?\w+/,
        keywords: {
            keyword: 'abort break case clear Closefile catch continue do '+
            'elseif else endfunction end for function '+
            'global if Openfile pause Projpara return resume select '+
            'Setcolor Setscaling Setpen SetstereoL SetstereoR tic toc try then while',
            literal:
            '%f %F %t %T %pi %eps %inf %nan %e %i %z %s',
            built_in: // Scilab has more than 2000 functions. Just list the most commons
            'abs Arrowdata Arrowline Arrowhead Arrowheaddata and acos Anglemark asin atan '+
            'BorderHiddenData ceil cd chdir Circledata clearglobal cosh cos '+
            'Crv3onsfHiddenData Crv3onsfparadata cumprod '+
            'Dashline deff disp Drwline Drwpt Drwxy Embed error '+
            'exec execstr exists exp Expr eye gettext floor fprintf fread '+
            'fsolve Hatchdata Htickmark imag isdef isempty '+
            'isinfisnan isvector lasterror length Letter Listplot '+
            'load linspace list listfiles log10 log2 log '+
            'max min msprintf mclose mopen norm ones or Paramark '+
            'Paramplot pathconvert Plotdata poly printf prod pwd rand real '+
            'round Setax Sf3data Sfbdparadata Shade sinh sin size sort Setangle Setwindow '+
            'Skeletonpara3data Skeletonparadata Skeletonpersdata Spacecurve Spaceline sprintf '+
            'sqrt strcat strcmp string sum system tanh tan type typename '+
            'Vtickmark warning Windisp Wireparadata Xyzax3data Xyzaxparaname zeros '
        },

keywordのところに、Openfile, Setcolor, Setscalingなどを書き加えて、built_inのところに、Allowline, Dashline, Setwindowなどを書き加えています。とりあえず、普段使っている関数だけで、KETpicの関数のすべては書き込んでいません。

この編集したファイルを上書き保存します(元ファイルはどこかにバックアップしたほうが良いでしょう)。そして、highlight.js-masterフォルダで端末を開いて、次を実行します:

sudo apt-get install nodejs-legacy 
node tools/build.js -n bash javascript scilab tex 

ここで、一行目はnode.jsをインストールします。二行目でビルドします。当サイトでは、Bash, JavaScript, Scilab, TeXを使うので、-n bash javascript scilab texというオプションをつけています。これでビルドは完了です。

[このページのトップへ]

使用例

前項でビルドしたhighlight.jsをテストしてみましょう。build/demo/index.htmlをブラウザで開くと、ビルドしたhighlight.jsの表示テストを見ることができます。ここで、好みのスタイルシートも探しておきましょう。

ビルドしたhighlight.jsのデモ

表示に問題なければ、実際にWebサイトで使ってみましょう。buildフォルダの中に生成されたhighlight.pack.jsを、たとえば、表示させたいhtmlと同じディレクトリに置きます。また、使いたいスタイルシートをsrc/stylesフォルダからコピーして同じ場所に置きます(私はgruvbox-dark.cssを選びました)。そして、表示させたいhtmlのヘッダに次を書き加えます:

<link rel="stylesheet" type="text/css" href="gruvbox-dark.css">
<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

これで、準備は終わりです。htmlファイルのbodyに、たとえば、次のように書き込みます:
<pre>
<code class="scilab">Setwindow([-0.2,1.2], [-0.2,1.2]);

function f=f(t)
  f=[cos(t), sin(t)];
endfunction

C1=Paramplot('f(t)', 't=[0,%pi/2]');
L1=Listplot([1,0], [0,1], [0,0], [1,0]);
</code>
</pre>
<code class="scilab">で、言語を指定します。指定がなくても、自動判別してくれます。すると、次のような表示が得られます。
カスタマイズ後のhighlight.jsの表示
自由にカスタマイズして、見やすいハイライトを定義していきましょう!

そして、もう一言。サーバーにhtmlファイルやhighlight.pack.jsをアップロードしたあとは、highlight.pack.jsのアクセス権に気をつけましょう。

chmod 755 highlight.pack.js

としておけばOKでしょう。

[このページのトップへ]

[補足]パッケージをダウンロードせず、外部サーバーを利用する方法

パッケージをダウンロードせずに使用する方法は簡単です。htmlヘッダに

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

を貼り付けるだけで使用する準備ができます。railscasts.min.cssの部分はスタイルシートの名前です。highlight.jsのデモページを参考に好みのスタイルシートを見つけましょう。

htmlファイルのbodyに、たとえば、次のように書き込みます:

<pre>
<code class="bash">#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
 echo "Superuser rights required"
 exit 2
fi

genApacheConf(){
 echo -e "# Host ${HOME_DIR}$1/$2 :"
}
</code>
</pre>
<code class="bash">で、言語を指定します。指定がなくても、自動判別してくれます。すると、次のような表示が得られます。

highlight.jsの表示(bash)

[このページのトップへ]