ソースコード等を綺麗に表示したいので試行錯誤の末、highlight.jsを動かしてみた。

By | 2017年6月3日 , Last update: 2022年8月6日
0 Comment

はじめに

ソースコード等をWordPress上で綺麗に表示したいけど、かといってあまりサイトの表示を重くはしたくないので超軽量という噂のhighlight.jsを入れてみました。なお、インストール及び設定にあたりましては、参考文献[1]の記事を参考にさせていただきました。この場を借りて御礼申し上げます。

スポンサーリンク

インストールの方針

ここに書いてある “23 commonly used languages”にある言語のみを表示のために使用する予定であれば、CDNに置いてあるhighlight.jsを直接使用すれば良いのですが、それ以外の言語を使用する場合には、ダウンロードをしてWebサーバでアクセス可能な場所に置く必要があります。本サイトではLaTeXのソースコードを書いているページがあるので、ダウンロードを行うこととします。

インストールの手順

インストールの手順は以下の通りです。

  1. https://highlightjs.org/ に行き、「Get Version 9.12.0」(2017年6月現在。バージョン番号は変更されるかもしれません。)のボタンを押す。
  2. “Custom package”の “other” のうち、お好みで必要なものをクリックします。本サイト用のものには、以下の言語を選択しています。
    • Access Log
    • Awk
    • DNS Zone file
    • DOS .bat
    • Go
    • Haskell
    • Lisp
    • TeX
  3. “other”の下の場所にある”download”ボタンをクリックします。
  4. highlight.zipというファイルがダウンロードされてくるので、Webサーバでアクセス可能な場所に置きます。

設定及び記述の方法(1st try: 簡単な方法)

設定の方法

ここのページの”Getting Started”の最初にある設定をheader.phpに書きます。以下の設定が最も簡単だと思います。

<link rel=”stylesheet” href=”/highlight/styles/zenburn.css”>
<script src=”/highlight/highlight.pack.js”></script>
<script>hljs.initHighlightingOnLoad();</script>

記述例

上記の設定がすでに記述例になっていますが、記述したいコードを

<pre><code>

と

</code></pre>

ではさみます。はさんだコードのタグについてはエスケープが必要です。最初に書こうとしたときにpreタグをcodeタグの順番を間違えて小一時間ハマったのは内緒です。

それで、表示させてみたんですが、

（＾ω＾）…

なんか、枠がついているようです。どうも調べてみると、本サイトで使用しているWordpressのテーマ(Iconic One)のpreタグの枠の設定が反映されているようです。

これはこれで残しておきたいので、別の方法を試みることにしました。

設定及び記述の方法(2nd try: divタグを使う方法)

ここのページの”Custom Initialization”の2番目にある設定をheader.phpに書きます。


スポンサーリンク

で、再度試してみたのですが、今度はまったく、設定が反映されません。そこで Chrome のデベロッパーツールで何かエラーが出ていないか確認してみたところ、

Uncaught TypeError "$" is not a function

って表示されていました。

設定及び記述の方法(3rd try: divタグを使いつつ、’$’を再定義する方法)

本サイトではjQueryを読み込んていて、その際に’\$’が未定義とされている可能性があったので(ここについては今のところ調べができていません。)、’\$’を再定義すべく、以下のように定義してみたところ、

<link rel=”stylesheet” href=”https://pandanote.info/highlight/styles/zenburn.css”>
<script src=”https://pandanote.info/highlight/highlight.pack.js”></script>
<script>
hljs.configure({useBR: true});jQuery(function($) {
$(‘div.code’).each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

ひとまず、上記のように動作するようになりました。記述したいコードを

<div class=”code”>

と

</div>

ではさみます。はさんだコードのタグについてはエスケープが必要であることは変わりません。


スポンサーリンク

また、言語を明示的に指定したい場合には、divタグのクラス属性に指定をすると、多少改善されることがあるようです。

補足[2022/08/06]

highlight.jsのv11.0以降では上記のuseBRは削除されてしまいました。

代替案としてはstyle.css等のCSSファイルに以下の設定を追記する等の方法が考えられます。

div.code {
white-space: pre;
}

 

LaTeXの数式との共存(2017/08/13追加)

[latexpage]というタグをページの先頭に入れると、変数の先頭に”$”がつく言語(PHP, Perl等)が含まれているとそこが数式の始まり(または終わり)と解釈されてしまうようで、うまく表示できるなくなることがあるようです。

このような場合には[latexpage]は使わずに、数式の直前及び直後に[latex]タグ及び[/latex]タグを入れ、その間に数式を記述すると上記の問題は回避できます。

まとめ

本記事ではhighlight.jsをインストールした際に試行錯誤をした点について記述しました。

実は本サイト上でソースコードを別ファイルにして置いておきたいものがあるのですが、それについてはhighlight.jsよりもGistの方が向いているのかなぁ、なんて思っています。サーバの容量もそれほどないので、外出しにできるだけでも随分違うのではないかと思っているんですがねぇ。

本記事は以上です。

References / 参考文献

  1. highlight.jsを利用してBloggerでLaTeXのソースコードに色付けを行う設定

Related Posts / 関連ページ

MediaWikiサーバを移転してみる。 移転先のMediaWikiサーバの構成及び設定を移転元のMediaWikiサーバの設定と合わせる。 Inkscape(0.92.4)でレンダリングしたLaTeXの数式にグラデーション処理を加える。 オンプレミスなFedora 31(or later)でGROWIを動かしてみた(1/2): GROWI等のインストール。