JavaScriptプラグインであるMathJaxを使い、プラグイン無しでWordPressで簡単に数式を表示させる方法について解説していきます。
WordPressでMathJaxを使う方法
WordPressで数式を使うには、プラグインを導入する方法、テーマエディターでヘッダーにコードを記述する方法などがあります。ヘッダーにコードを記述すると、全てのページでそのコードが適用されてしまうので、意図しない表示になるページが発生する可能性があります。
今回紹介する方法は、数式を表示させたいページ単体にMathJaxを読み込ませて数式を表示させたいと思います。当ブログのテーマはcocoonですが、cocoon以外のテーマを使用していても同じように使うことができます。
まず、表示させたいページでカスタムHTMLブロック中に以下のコードを貼り付けます。
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>上記コードを貼り付けることで、そのページではMathJax（バージョン3）が有効になります。そして、数式を\(と\)で囲むことで、数式を\(TeX\)で表示させることができます。試しにテーラー展開の公式を文中に表示させます。
// テーラー展開(x=a)
\( 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} \)のように数式を表示できます。
数式を\[と\]で囲むことでディスプレイ数式も可能です。
// テーラー展開(x=a)
\[ 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} \]
数式の表示ができました。
公式ページでデモ機能があるので、気軽に使ってみることも可能です。『Live Demo | MathJax』
改行が出来ない場合
MathJaxでは\\で改行を行うことができますが、バージョン3では改行が効かないといった不具合があるようです。改行を行いたい場合はバージョン4のα版を使用することで、改行を行うことができます。
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-alpha.1/es5/tex-mml-chtml.js">
</script>\[ 1 \\ 2 \\ 3 \]\[ 1 \\ 2 \\ 3 \]
当ブログでは数式を用いるシチュエーションはそんなに無いのですが、一部ページでのみ使用することがあったので、ページ単位でMathJaxを使う方法を採用することにしました。以上で記事を終わりにします。