WordPressの忘備録
ブログの記述にあたり、mathjaxの使い方を記す。雑記。
主に著者用だけど、役に立つひとが極稀にいるかもなので公開。
苦労した mhchemの導入
【2021/10/15更新】
忘備録として手順を載せておく。
テーマを直接編集するので自己責任でよろしく。
以下の手順を実行したことによる損害に対して、ともけむは一切責任を負いません。
- WordPressのプラグインである、Mathjax Latexを導入。
- 念の為バックアップをとる。
- 外観 → テーマエディター を選ぶ。
親テーマ header.php 内の<head>内に以下を記述
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
matchFontHeight: false,
mtextFontInherit: false
},
tex2jax: {
inlineMath: [ ['$','$'], ['\\(','\\)'] ],
processEscapes: true
},
TeX: {
extensions: ["mhchem.js"] }
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.2/mhchem.js?config=TeX-AMS_CHTML">
</script>以下，過去の文章。
２日かけてようやく導入できた。mhchemは化学式をきれいに見せるパッケージ。上手く表示するまでにかなり苦労してしまった。（TexもWordpressもど初心者。。）
忘備録として手順を載せておく。
テーマを直接編集するので自己責任でよろしく。
以下の手順を実行したことによる損害に対して、ともけむは一切責任を負いません。
WordPressのプラグインである、Mathjax Latexを導入。念の為バックアップをとる。外観 → テーマの編集 → テーマのヘッダーを選ぶ。<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}
