【MathJax】サイトに簡単に数式を表示させる方法

【MathJax】サイトに簡単に数式を表示させる方法

JavaScriptプラグインであるMathJaxを使い、プラグイン無しでWordPressやHugoで簡単に数式を表示させる方法について解説していきます。

目次

WordPressでMathJaxを使う方法

WordPressで数式を使うには、プラグインを導入する方法、テーマエディターでヘッダーにコードを記述する方法などがあります。ヘッダーにコードを記述すると、全てのページでそのコードが適用されてしまうので、意図しない表示になるページが発生する可能性があります。

今回紹介する方法は、数式を表示させたいページ単体にMathJaxを読み込ませて数式を表示させたいと思います。当ブログのテーマはcocoonですが、cocoon以外のテーマを使用していても同じように使うことができます。

まず、表示させたいページでカスタムHTMLブロックに以下のコードを貼り付けます。

カスタム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のα版を使用することで、改行を行うことができます。

カスタムHTMLブロック
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の場合でもWordPressと同様に、head要素内に上記のscript要素を追加することで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を使う方法を採用することにしました。以上で記事を終わりにします。

参考文献

関連記事