mhchem の導入と MathJax|KaTeX 切り替え機能

はじめに

この文書は mhchem の導入と MathJax|KaTeX 切り替え機能を試みる頁です。内容については専門外なのでまったくわかっておらず「国立天文台編, 理科年表, 平成２９年, 丸善出版, 2016」から mhchem でのレンダリングに興味がある箇所を引用しました。

「電子授受平衡」及び「リチウムイオン電池」について某男の教えを頂戴しました。

電気・溶液化学

電子授受平衡

$\ce{Li+ + e- = Li -3.045}$
$\ce{2H+ + 2e- = H2 +0.000}$
$\ce{F2 + 2e- = 2F- +2.87}$

二次電池

鉛蓄電池 … $\ce{Pb + PbO2 + 2H2SO4 <--> 2PbSO4 + 2H2O}$ 電解質 $\ce{H2SO4}$ 2.04V
リチウムイオン電池 … $\ce{Li_{x}C + Li_{1-x}CoO2 <--> C + LiCoO2}$ 電解質 $\ce{LiClO4}$ 他 4.10V

無機物質の主な化学反応

$\ce{C + O2 -> CO2}$
$\ce{CO2 + C -> 2 CO}$

主な有機化学反応

付加反応

ヒドロホウ素化

$\ce{$n$-C4H9CH = CH2 ->[B2H6] ($n$-C4H9CH2CH2)3B ->[H2O2][NaOH] $n$-C4H9CH2CH2OH}$
ヒドロホウ素化

ユーザ入力

ここではリアルタイムで下のテキストエリアの HTML を「mhchem with MathJax|KaTeX」でレンダリングできるので活用してください。

リチウムイオン電池
負極 $\ce{LiC6 -> Li_{1-x}C6 + $x$Li+ + $x$e-}$ ($0 < x < 0.5$)
正極 $\ce{Li_{1-x}CoO2 + $x$Li+ + $x$e- -> LiCoO2}$
$\ce{LiC6 + Li_{1-x}CoO2 <-->[{放電}][{充電}] Li_{1-x}C6 + LiCoO2}$
リチウムイオン電池<br/> 負極 $\ce{LiC6 -> Li_{1-x}C6 + $x$Li+ + $x$e-}$ ($0 < x < 0.5$)<br/> 正極 $\ce{Li_{1-x}CoO2 + $x$Li+ + $x$e- -> LiCoO2}$<br/> $\ce{LiC6 + Li_{1-x}CoO2 <-->[{放電}][{充電}] Li_{1-x}C6 + LiCoO2}$

化学式を入力するのは素の TeX でも不可能ではないけれど、mhchem だと格段に簡単になるのがわかると思います。chemfig パッケージにも対応すればさらに表現力が上がるのですが。

おわりに

以下のセレクタで MathJax と $\KaTeX$ の切り替えができるようになっています。左の \KaTeX がレンダリングされていなければ MathJax が作動しています。また、実験的に MathJax の入出力方式も選べるようになっています。さらに、実験的に MathJax v2 も選べるようにしました。さらにさらに、math タグ内の annotation[encoding='TeX'] タグを math タグに必要なときに置換し、レンダリングされるようになっています。

Change mathematical renderer: Change MathJax parser: Change MathJax renderer:
render Math ML annotation in TeX:

Math ML も選べるようになっているので、math タグの数式を以下に貼っておきます。

自然数の -1 乗の総和: $\sum_{n=1}^{+\infty} \frac{1}{n^1} = \infty$

自然数の -2 乗の総和: $\sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$

自然数の -3 乗の総和: $\sum_{n=1}^{+\infty} \frac{1}{n^3} = \zeta(3)$

自然数の -4 乗の総和: $\sum_{n=1}^{+\infty} \frac{1}{n^4} = \frac{\pi^4}{90}$

どういう結果になるかというと、筆者の環境だと：

そもそも KaTeX は Math ML を処理しませんので、no renderer とおなじで、ブラウザ依存となります。

ブラウザによる Math ML

Google Chrome: 未対応ゆえ annotation[encoding='TeX'] タグの内容が表示されます。

Apple Safari: 見辛いですが、数式はレンダリングされています。

Mozilla Firefox: TeX ほどではないものの、かなり忠実にレンダリングされています。

MathJax v2 による Math ML

Chrome, Safari, Firefox すべてにおいて、HTML, SVG いずれも美麗にレンダリングされています。

MathJax (v3) による Math ML

Chrome において、SVG 出力に問題があります。

Safari において、~~HTML 出力の問題 (バウンディングボックス) があります。~~問題は解消しています。

Firefox, Safari において、HTML, SVG いずれも美麗にレンダリングされています。

MathJax|KaTeX による Math ML annotation in TeX

annotation[encoding='TeX'] タグの TeX に誤りがない限り、MathJax, KaTeX の TeX レンダリングと同等な結果が得られます。Math ML レンダリング可能な Firefox においても現時点ではよい選択です。Chrome, Safari において現時点では必須となるでしょう。

MathJax|MathJax v2|KaTeX 切り替え機能

現時点では、まだ試行錯誤中なので、この HTML 文書のソースコードを見て下さい、ということでご容赦下さい。こちらのページの下の方でも同様の試みを行っているので(失敗するケースも残してあったりする)、念の為。

ソースを眺めてみて、もっとエレガントな方法があったらよかったら教えて下さい。

Math ML annotation タグのレンダリング化

基本は math タグを math annotation[encoding='TeX'] タグの内容に置き換えてしまうだけなので、やってることは簡単です。この Javascript ソースコードを見ればわかります。