webサイトに化学式を表示する:MathJaxの拡張機能「mhchem」

こんにちは。管理人のpencilです!

本稿では化学式をwebサイト上で表示する「mhchem」というMathJaxの拡張機能(additional formatting features)をご紹介します。



 

・「MathJax」とは

まず「MathJax」とは何ぞや?という方向けに簡単に説明しておきます。

MathJaxはLaTeXやMathML形式で記述された数式をウェブブラウザ上で表示するJavaScriptライブラリで、当サイトの記事「web上で数式を表現するmathjax」で少し紹介しています。web上で数式を表現するにはテキストのまま、画像を使う、…など色々とやり方がありますが、LaTeX様式の数式レンダリングが可能なMathJaxを使うケースが増えています。当サイトもそういった潮流に乗るウェブサイトの一つです。

以下のscriptをhtmlに埋め込めばMathJaxが利用可能になります(※ブラウザ側でJavaScriptを有効化している必要があります)。

これにより、$$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さえ使えれば拡張機能の導入は非常に簡単です。皆さんの理想のウェブサイト実現へのツールとして、拡張機能を余すところなく活用してもらえたらと思います!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です