こんにちは。管理人のpencilです！
本稿では化学式をwebサイト上で表示する「mhchem」というMathJaxの拡張機能（additional formatting features）をご紹介します。
・「MathJax」とは
まず「MathJax」とは何ぞや？という方向けに簡単に説明しておきます。
MathJaxはLaTeXやMathML形式で記述された数式をウェブブラウザ上で表示するJavaScriptライブラリで、当サイトの記事「web上で数式を表現するmathjax」で少し紹介しています。web上で数式を表現するにはテキストのまま、画像を使う、…など色々とやり方がありますが、LaTeX様式の数式レンダリングが可能なMathJaxを使うケースが増えています。当サイトもそういった潮流に乗るウェブサイトの一つです。
以下のscriptをhtmlに埋め込めばMathJaxが利用可能になります（※ブラウザ側でJavaScriptを有効化している必要があります）。
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'] ],
processEscapes: true
}
});
</script><script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/latest.js?config=TeX-AMS_CHTML">
</script>
これにより、$$e^{i\pi }+1=0$$などといった表示や、さらに複雑な$$E\psi =-{\frac {\hbar ^{2}}{2m}}{\frac {d^{2}}{dx^{2}}}\psi +{\frac {1}{2}}m\omega ^{2}x^{2}\psi$$といった数式の表示が可能になります。
script内のConfig部分をいじれば自分好みにカスタマイズすることができます。また、マクロを設定して独自のコマンドを定義することも可能です。MathJaxを利用しているサイトのソースコードを覗いてみるとユニークなマクロが組まれていたりして結構面白いですよ(笑)。
なお、script中の
「https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/latest.js」
の部分は、バージョンアップに応じて適宜書き換えが必要になります。$\require{mhchem} \require{AMScd} \require{enclose}$
・MathJaxの拡張機能「mhchem」
MathJaxによって可能となるのは数式のレンダリングだけではありません。実は化学式をレンダリングする拡張機能である「mhchem」がサポートされており、簡単に化学式が記述できるのです。（TeX文書の中ではmhchemパッケージをダウンロードして「\usepackage{mhchem}」と書けば使えます）
例えば、アンモニアソーダ法の化学反応式は次のようになります。$$2 \mathrm{NaCl}+\mathrm{CaCO}_{3} \longrightarrow \mathrm{CaCl}_{2}+\mathrm{Na}_{2} \mathrm{CO}_{3}$$これは
2 \mathrm{NaCl}+\mathrm{CaCO}_{3} \longrightarrow \mathrm{CaCl}_{2}+\mathrm{Na}_{2} \mathrm{CO}_{3}
と書くことでMathJaxにより表示されますが、mhchemでは
\ce{2NaCl + CaCO3 -> CaCl2 + Na2CO3}
と書くだけで済んでしまいます。表示すると以下のようになり、全く同様に表示されていますね。$$\ce{2NaCl + CaCO3 -> CaCl2 + Na2CO3}$$
・mhchemの使い方
使い方は至ってシンプルで、通常の数式と同じように
\require{mhchem}
を$で囲むだけです（1個書くだけでOK）。このrequireコマンドによって、MathJaxがサポートしている拡張機能をウェブサイト上で呼び出すことができます。注意点としては、\require{mhchem}以降の行でしかmhchemが有効にならないので、必ず化学式の上に書くようにしましょう。
● ● ●
使用例を列挙します。
\ce{H2O} $\ce{H2O}$
\ce{Sb2O3} $\ce{Sb2O3}$
\ce{H+} $\ce{H+}$
\ce{CrO4^2-} $\ce{CrO4^2-}$
\ce{H2_{(aq)}} $\ce{H2_{(aq)}}$
\ce{NO3-} $\ce{NO3-}$
\ce{1/2H2O} $\ce{1/2H2O}$
\ce{^{227}_{90}Th+} $\ce{^{227}_{90}Th+}$
微妙なスペース（空白）の有無で想定外の表示になってしまうことがあるので、適宜確認しながら入力しましょう。
化学反応式は次のように表記します。
\ce{CO2 +C->2CO} $\ce{CO2 +C->2CO}$
\ce{CO2 +C<-2CO} $\ce{CO2 +C<-2CO}$
\ce{CO2 +C<=>2CO} $\ce{CO2 +C<=>2CO}$
\ce{H+ + OH- <=>>H2O} $\ce{H++OH- <=>>H2O}$
\ce{$A$<->$A’$} $\ce{$A$<->$A’$}$
\ce{SO4^2- +Ba^2+->BaSO4v} $\ce{SO4^2- +Ba^2+->BaSO4v}$
\ce{CH_4(g) +2O_2(g)->CO_2(g) +2H_2O(l)$\quad\Delta H_\ce{c}^{\ominus}=-890.3\;$kJ$\;$mol^{-1}}
$\ce{CH_4(g) +2O_2(g)->CO_2(g) +2H_2O(l)$\quad\Delta H_\ce{c}^{\ominus}=-890.3\;$kJ$\;$mol^{-1}}$
平衡定数なども簡単に記述できます。
K=\dfrac{[\ce{Hg^2+}][\ce{Hg}]}{[\ce{Hg2^2+}]}
$$K=\dfrac{[\ce{Hg^2+}][\ce{Hg}]}{[\ce{Hg2^2+}]}$$
K_c=\dfrac{\ce{[CH3COO^- ][H+]}}{\ce{[CH3COOH]}}
$$K_c=\dfrac{\ce{[CH3COO^- ][H+]}}{\ce{[CH3COOH]}}$$
・その他の拡張機能
このようにmhchemを使えば直感的に化学式や反応式を記述できるため、化学屋さんにとっては重宝するツールです。もっと詳しい内容について知りたい方はmhchemのマニュアルを参照して下さい。
MathJaxでは他にもAMScdやcancel、action、encloseなどといった拡張機能をサポートしており、フレキシブルな数式表示・運用を可能にしています。
【AMScd】（\require{AMScd}で読み込み）
$$\begin{CD}
G(Y) @<{G(f)}<< G(X)\\
@A{t_{Y}}AA @A{t_{X}}AA \\
F(Y) @<{F(f)}<< F(X)
\end{CD}$$
【enclose】（\require{enclose}で読み込み）
$${e=\displaystyle \lim _{n\to \infty }\left(1+\enclose{roundedbox}[mathcolor=”#ff0000″]{\color{#333333}{\dfrac {1}{n}}}\right)^{n}} \quad \left(\enclose{roundedbox}[mathcolor=”#ff0000″]{\color{white}{■}}=\text{微小な数}\right)$$
文字の囲みのほか、キャンセルも数式上で表現することができます。
$$1+1 = \enclose{updiagonalstrike downdiagonalstrike}[mathcolor=”red”]{\color{black}{3}} \color{red}{2}$$
MathJaxさえ使えれば拡張機能の導入は非常に簡単です。皆さんの理想のウェブサイト実現へのツールとして、拡張機能を余すところなく活用してもらえたらと思います！