記事への数式埋め込み (MathJax / JavaScript)

記事に数式を埋め込む環境を作ります。移転前のサイトと同様にMathJaxというJavaScriptライブラリを使用します。MathJaxはLaTeX形式で入力された数式を数式用のWebフォントを使ってタイプセットするものです。見栄えだけでなく、テキスト形式なので拡大してもファントが崩れず検索性も良いというメリットがあります。

MathJaxの導入

MathJaxの使い方を参考に導入しました。数年前はMathJax CDNサービス(cdn.mathjax.org)から最新版を読み込んでいましたが、2017年4月をもって廃止になったようです。

今回は次のコードをheader.phpのheadタグ内に記載しています。はじめのscriptはMathJaxのカスタマイズ設定で、デフォルトでは中央に表示される数式を左寄せにしています。現在はArkheテーマを使わせていただいているため、テーマファイルエディタから更新しました(親テーマを更新した場合、テーマのVer.UP時に再記載が必要)。

<!-- MathJaxカスタマイズ(MathJaxの読み込みより前に置く約束) -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left"
});
</script>

<!-- MathJaxを使うための記述開始 -->
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML">
</script>

無事に更新できたら、\(半角)(…\(半角))で囲った部分はインライン数式、\(半角)[…\(半角)]で囲った部分は別行立てのディスプレイ数式としてLaTeXコードがタイプセットされます。例えば、以下がコードとそれに対応する出力です。綺麗。

\[\oint _{s}E\cdot ds=-\dfrac {d\Phi _{B}} {dt}\]

\[\oint _{s}E\cdot ds=-\dfrac {d\Phi _{B}} {dt}\]

数式をLaTeX形式に簡単に変換したい

MathJaxで数式埋め込みができるようになりましたが、数式をLaTeX形式で表現するするのが面倒です。そのため以前よりmyscript.comのMathというサービスを使用しています。これは手書き入力された数式をLaTeX形式に変換してくれるというもので、以下のように複雑(?)な数式もきちんと認識してくれます。おすすめです。