【MathJax】サイトに数式を簡単に表示させる
JavaScriptプラグインであるMathJaxを使い、プラグイン無しでWordPressやHugoで数式を表示させる方法を解説します。
WordPressでMathJaxを使う方法
WordPressで数式を使うには、プラグインを導入する方法、テーマエディターでヘッダーにコードを記述する方法などがあります。ヘッダーにコードを記述すると、全てのページでそのコードが適用されてしまうので、意図しない表示になるページが発生する可能性があります。
今回紹介する方法は、数式を表示させたいページ単体にMathJaxを読み込ませて数式を表示させたいと思います。
まず、表示させたいページでカスタムHTMLブロックに以下のコードを貼り付けます。
1<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
2</script>上記コードを貼り付けることで、そのページではMathJax（バージョン3）が有効になります。そして、数式を\(と\)で囲むことで、数式を\(TeX\)で表示させることができます。試しにテーラー展開の公式を文中に表示させます。
1\( f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \)文章の途中でも、\( f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \)のように数式を表示できます。
数式を\[と\]で囲むことでディスプレイ数式も可能です。
1\[ f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \]\[ f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \]
数式の表示ができました。
公式ページにデモ機能1があるので、気軽に使ってみることも可能です。
改行が出来ない場合
MathJaxでは\\で改行を行うことができますが、バージョン3では改行が効かないといった不具合2があるようです。改行を行いたい場合はバージョン4のα版を使用することで、改行を行うことができます。
1<script type="text/javascript" id="MathJax-script" async
2 src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-alpha.1/es5/tex-mml-chtml.js">
3</script>1\[ 1 \\ 2 \\ 3 \]\[ 1 \\ 2 \\ 3 \]
改行されているのが分かります。
HugoでMathJaxを使う方法
Hugoの場合、記事のフロントマターにmathjax = trueを指定することで、MathJaxが有効化されます。
Hugoでは$$もしくは\\[と\\]で囲むことでディスプレイ形式で数式が表示できます。\\(と\\で囲むことでインライン形式で表示ができます。
1数式：\\( f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \\)数式：\( f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} \)
1$$
2f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n}
3$$$$ f(x)=\sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x-a)^{n} $$
改行は以下の様に書きます。
1\\[ 1 \\\\ 2 \\\\ 3 \\]\[ 1 \\ 2 \\ 3 \]
改行の書き方もWordPressとちょっと違うので注意しましょう。
当ブログでは数式を用いるシチュエーションはそんなに無いのですが、一部ページでのみ使用することがあったので、ページ単位でMathJaxを使う方法を採用することにしました。以上で記事を終わりにします。