pickup
【現在著者のメモ帳】WordPressとmathjaxとmhchem
スポンサーリンク

WordPressの忘備録

ブログの記述にあたり、mathjaxの使い方を記す。雑記。

主に著者用だけど、役に立つひとが極稀にいるかもなので公開。

苦労した mhchemの導入

2日かけてようやく導入できた。mhchemは化学式をきれいに見せるパッケージ。上手く表示するまでにかなり苦労してしまった。(TexもWordpressもど初心者。。)

忘備録として手順を載せておく。

テーマを直接編集するので自己責任でよろしく。

以下の手順を実行したことによる損害に対して、ともけむは一切責任を負いません。

  1. WordPressのプラグインである、Mathjax Latexを導入。
  2. 念の為バックアップをとる。
  3. 外観 → テーマの編集 → テーマのヘッダーを選ぶ。
  4. <head>内に以下を記述

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

ともけむを苦しめたのはこの黄色マーカーの部分。

他のサイト様を参考に導入していたのだが、どうやらここが無効なものになっていたようで。

バージョンアップなどするかもしれないので、念の為 https://cdnjs.com/の検索窓にmathjax-mhchemと打ち込んで、最新のリンクに変えよう。

あとは投稿記事で、$\ce {H2O} $のように化学式を打ち込むのだが、「ビジュアル」でやると余計な文字が入っていて、これまた上手いこと表示されない。

(htmlちんぷんかんぷんだったのでここでも苦戦。)

化学式を打ち込むときだけでも、「テキスト」で打ち込むべし

mhchemによって、Wordpressで化学式がきれいに表示できる

参考までに、打ち込みとその表示を書いておく。

$\ce {H2O} $       $\ce {H2O} $     

$\ce {Na2CO3}$      $\ce {Na2CO3}$ 

$\ce{[Ag(CN)2]-}$     $\ce{[Ag(CN)2]-}$

$\ce{CaCO3 <=> Ca^2+ + CO3^2-} $    $\ce{CaCO3 <=> Ca^2+ + CO3^2-}$

記述方法はhttp://doratex.hatenablog.jp/entry/20131203/1386068127を参考にしました。

※ まだこの状態では上記リンク内の式が全てWordpress で書けないので、さらに機能が拡張できないか模索中。。。

 

mathjax スマホの数式表示のフォントサイズがいい感じになった!

【2019/02/11追記】

 

スマホのみ、数式の表示がでかくなっていたが、

https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/

のサイトページを参考にしたら上手いこといったーーーー!我、歓喜!!!

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
matchFontHeight: false,
mtextFontInherit: false
},
tex2jax: {
inlineMath: [ ['$','$'], ['\\(','\\)'] ],
processEscapes: true
},
TeX: {
extensions: ["mhchem.js"] }
});
</script>

が、しかし ともけむ はあまり理解できていないので、勉強しないとなって感じでございます。

matchFontHeight: false だと、高さが揃わないのでは?!とか思ったり。

 

mathjax で表を書く

http://easy-copy-mathjax.xxxx7.com/#binary-operations

上記サイト(Easy Copy MathJax さん ) で表を書く方法を発見。

化学では 3 段の反応収支表とかを書くから使えそう。

\begin{array}{c|ccccc} x & \cdots & -1 & \cdots & 1 & \cdots \\ \hline f’(x) & + & 0 & – & 0 & + \\ \hline f(x) & \nearrow & e & \searrow & -e & \nearrow\end{array}

\begin{array}{c|ccccc} x & \cdots & -1 & \cdots & 1 & \cdots \\ \hline f’(x) & + & 0 & – & 0 & + \\ \hline f(x) & \nearrow & e & \searrow & -e & \nearrow\end{array}
スポンサーリンク
おすすめの記事