wordpressで綺麗に化学反応式を書く

2024年10月6日

受験ブログ的なものをやっていると、ついダニングクルーガー効果に陥って、化学反応式をメモしたくなる場合があると思われる。wordpressでMathJaxというプラグインを使用すると化学反応式をきれいにかくことができる。そのやり方を自分用のメモとして記録しておくので、同じ思いを持った方の参考になれば幸いである。

必要な条件

必要な条件は以下の通り。

・プラグイン　Mathjax-Latex　のインストール

・設定において　MathJax Configuration　を　TeX-AMS_HTML　にすること

・デザインの外観設定のページなどからheaderに以下のコードを埋め込むこと。(多少のページ表示の遅延が発生する可能性があるが、私は気にしない)

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    processEscapes: true
  },
  TeX: {
    extensions: ["mhchem.js"]
  },
  CommonHTML: {
    matchFontHeight: false
  }
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/MathJax.js?config=TeX-AMS_CHTML">
</script>

基本の書き方

Chemical Equations (ce)という意味のceを化学反応式の前につけ{ }で囲む。それをさらに$$で囲むがLaTeXで数式を記述する際の書き方と変わるところは特別にないと思われる。

難しい話をすればキリがないだろうが、$\ce{ぺけぺけ}$という具合に記事編集画面でベタ打ちすれば良いだろう。大学受験における理科は演習問題を解くことが最も重要であると聞く。サイト作りも同様にやってみるのが一番飲み込みが早くなるので、ぜひお試ししてみてはいかがだろうか。

$\ce{H2O}$

$\ce{H2O}$

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

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

$\ce{Cl2 + H2O <--> HCl + HClO}$

$\ce{Cl2 + H2O <- -> HCl + HClO}$

あれ？マニュアルには< – – >で両方向への矢印を表すと書いてるはずだが、2段表示ではなく1段表示になってしまい、うまく表示されない。

まあ、そんなことを悠長に勉強している場合ではない。

ちなみに数式は以下のように書ける。だいたいコードを見れば規則のイメージがわくものと思われる。

$$ \sum_{k=1}^{n}k =  \frac{(n+1)n}{2} $$

$$\sum_{k=1}^{n}k =  \frac{(n+1)n}{2}$$

$$ S'(x) = \lim_{h \to 0} \biggl(\frac{ΔS}{h}\biggl) = f(x) $$

$$S'(x) = \lim_{h \to 0} \biggl(\frac{ΔS}{h}\biggl) = f(x)$$

$$ {\int_{a}^{b} f(t) dt} = F(b) - F(a) $$

$${\int_{a}^{b} f(t) dt} = F(b) – F(a)$$

$$F = k\frac{qQ}{r^2}$$

$$F = k\frac{qQ}{r^2}$$

ではまた。