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の表示テストを見ることができます。ここで、好みのスタイルシートも探しておきましょう。
表示に問題なければ、実際に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">で、言語を指定します。指定がなくても、自動判別してくれます。すると、次のような表示が得られます。
そして、もう一言。サーバーに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">で、言語を指定します。指定がなくても、自動判別してくれます。すると、次のような表示が得られます。