org-mode の html 出力を KaTeX にする

[2018-12-15 Sat] 作成.
Emacs の多機能アウトライナー org-mode は、標準で MathJax を出力するようになっている。便利なのだが、たくさん式を使うことや、モバイルデバイスからのアクセスを想定すると、これより機能面では発展途上だが非常に軽快な \(\KaTeX\) を使ってみたいと思った。

[2018-12-15 Sat] .
\(\KaTeX\) は MathJax と同様に、所定の javascript と css を html に含めるだけでソース中の \(\LaTeX\) 部分を組版された文字に変換してくれる。
トップページでも使っていたから気付いた方もいるかもしれない。

内部では MathML を用いて組んでいるらしい。このページのソースを見てもそうなっている。

MathJax は org-mode に標準で用いられていて、ソース内の \(\LaTeX\) をコンパイル後の状態と切り替える関数 org-toggle-latex-fragment にも使われている。
ちなみにこの関数を使うとプレビューが小さすぎたので、下の関数を評価するか設定ファイルに追加しておくと良い。

(setq org-format-latex-options (plist-put org-format-latex-options :scale 2.0))

今のところはバックエンドに MathJax を使っているが、いづれは \(\KaTeX\) を使う方策を見つけたらここに追記したい。

[2018-12-15 Sat] .
\(\KaTeX\) の最新版をダウンロードする。
基本的に最新版のほうがサポートされるコマンド・環境が増えるので古いものを選ぶ必要はない。

https://github.com/KaTeX/KaTeX/releases

最新の katex.zip を選択した(v0.10.0 だった)。

解凍したもののうち、

• katex.min.js
• katex.min.css
• ./fonts/ 一式¹
• ./contrib/*.min.js
• ./contrib/copy-tex.min.css

を、 html からアクセスできる場所に置く。
このサイトは /katex/ 以下に置いた。 contrib ディレクトリのものは適宜選択してよいが、 auto-render は是非加えるべきで、これはブラウザで開いたときにソース内の \(\LaTeX\) を逐一変換してくれるものだ。逆に言えば auto-render 抜きでは自動で変換してくれることはない。

あとはこれを html ソースから呼べばいい。
このサイトの場合は次の通り。

<link rel="stylesheet" type="text/css" href="katex/katex.min.css">
<link rel="stylesheet" type="text/css" href="katex/contrib/copy-tex.min.css">
<script defer src="katex/katex.min.js"></script>
<script defer src="katex/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
<script defer src="katex/contrib/copy-tex.min.js"></script>
<script defer src="katex/contrib/mathtex-script-type.min.js"></script>

なお公式ページがホストしている URL を見にいくようにしても動くが、サーバーの負担と軽快さを考えてちゃんとダウンロードしたほうがいいと思う。

[2018-12-15 Sat].
html で使うなら上の通りで良いのだが、 org-mode で使うなら MathJax を無効にする必要がある。

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="katex/katex.min.css">
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="katex/contrib/copy-tex.min.css">
#+HTML_HEAD: <script defer src="katex/katex.min.js"></script>
#+HTML_HEAD: <script defer src="katex/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
#+HTML_HEAD: <script defer src="katex/contrib/copy-tex.min.js"></script>
#+HTML_HEAD: <script defer src="katex/contrib/mathtex-script-type.min.js"></script>

まず html の項目をそのまま #+HTML_HEAD: に乗せた (#+HTML_HEAD: と #+HTML_HEAD_EXTRA: の差が未だに分かっていないがどちらでも動く)。

#+OPTIONS: tex:verbatim

これが今回の要で、つまり html 出力のときに \(\LaTeX\) 部分は何も処理しない、というオプションだ。ちなみに tex:t は MathJax を使え、 tex:nil は \(\LaTeX\) 部分を 取り除け 、という意味なので気を付けたい。

[2018-12-15 Sat].
使えるコマンドは、標準機能と amsmath.sty であれば問題ない程度に充実していると思う。

https://katex.org/docs/supported.html

使用可能なコマンド・環境リスト(使用目的別)

https://katex.org/docs/support_table.html

使用可能なコマンド・環境一覧(名前順)

align, alignat は使えず、 aligned, alignedat を $$~$$ 内に入れて使うことに注意。また、自分はインライン数式(普段は $~$ としている)を、 \(\KaTeX\) が $$~$$ と混同しないようにするためにわざわざ \(~\) としている。

また、面白いとおもったのは Unicode の mathematical-alphanumeric-symbols をそのまま用いることができる点だ。 \(ℒ[f(x)] = \int_0^\infty f(x)\exp(js) dx\) の ℒ などは見た目通りに処理してくれるので嬉しいかもしれない。

[2018-12-15 Sat].
このページを書きながら調べていたらすぐに見つけてしまった。検索語は use katex for org-mode latex fragment で、 reddit の投稿がここ。

見ていて気持ちが悪いほど速い表示で、コマンドを打たなくてもホバー表示なのは便利すぎる。私は Emacs に xwidget オプションを付けていなかった気がするのでまた今度説明するかもしれない。