Warning: Use of undefined constant cat_color - assumed 'cat_color' (this will throw an Error in a future version of PHP) in /home/naft/naft.space/public_html/journal.naft.space/wp-content/themes/theme/single.php on line 40
Warning: Use of undefined constant cat_color - assumed 'cat_color' (this will throw an Error in a future version of PHP) in /home/naft/naft.space/public_html/journal.naft.space/wp-content/themes/theme/single.php on line 40
こんにちは、マネジメント部の内田です。
wordなどで数式を入力して綺麗に書くことはできますが、ブログでどうやったらいいのだろう…と思っていたらmathjaxという便利なライブラリを見つけたので使い方と共にご紹介します。
何が出来るのか
- html上でLatexの記述方式を使える。
※wordpressでも使えます。今回はwordpressで使う場合の方法を載せていきます。 - 化学式も記述できる。
- 画像貼り付けではなくCSSやSVGを使って変換してくれる。
※他にもLatex形式にしてくれるwordpressプラグインがありますが、多くは画像が貼られるのであまり綺麗ではないし、余計な読み込みが発生します。
[公式サイト] https://www.mathjax.org/
[wikipedia] https://ja.wikipedia.org/wiki/MathJax
導入方法
<head>タグの中に下のコードを挿入して、ライブラリを読み込む。
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>config= 以下の文字列は設定ファイルを指定しているのですが、ドキュメンテーションによるとこれが1番簡単に始められるからおすすめだよって書いてあります。
wordpressを使っている場合
wordpressにはmathjax -Latexというプラグインがあるのですが、僕の環境だと導入しても効果がありませんでした。wordpressのバージョンは4.7です。
いろいろいじったのですが、変化がないので直接ライブラリを読み込んでしまうことにしました。
自分で作ったテーマを使っていたり更新されないテーマを使っている場合はheader.phpを開いて、</head>の直前くらいに入れておきましょう。
それ以外の場合は、Head, Footer and Post Injections Pluginを利用しましょう。
Googleで「wordpress header 挿入」で検索すると使い方が出てきますが、これを利用すると管理画面から挿入<head>に挿入することができます。
wordpressを利用している場合としていない場合の違いはこれくらいで、あとは同じ操作で利用することができます。
どんな感じに表示されるか
\(......\)で囲った部分がインラインの要素として、
$$......$$で囲った部分がブロック要素として変換されます。
例を出していきましょう。
\(x^2 + 2x + 1\)の解は...
→
\(x^2 + 2x + 1\) の解は…
式1.1のようになる. $$x^2 + 2x + 1$$
→
式1.1のようになる. $$x^2 + 2x + 1$$
簡単にLatex形式で記述できました！
化学式を記述するためにちょっと変更する
化学式を記述する必要がある場合、上付き文字や下付き文字をたくさん記述しなければならず、また、化学式特有の表記もあります。
mathjaxはそれらにも対応することができます。（もはやmathではない？）
先程<head>内の記述したコードの前に以下を挿入します。
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
extensions: ["mhchem.js"]
}
});
</script>これによってmhchemというTexのパッケージを利用できます。
例えばこれまで\(H_2O\)は\(H_2O\)と記入しなければなりませんでした。
しかしこれだとHと2Oというかたまりに見えますし、記述が面倒です。
mhchemを導入したことで\(\ce{H2O}\)は\(\ce{H2O}\)と記述することで表示されるようになりました。
1つの物質だけなので、文字数は増えていますが化学式などを記述する際には大きな効果を発揮するはずです。
$$\ce{H_2SO_4 <=> HSO_4^- + H^+}$$
\(\ce{<=>}\)のような化学式特有の記号も記述できますしね。
Texやmhchemの記述方法はGoogleで検索してください。
LINE