【MathJax】サイトに簡単に数式を表示させる方法
JavaScriptプラグインであるMathJaxを使い、プラグイン無しでWordPressやHugoで簡単に数式を表示させる方法について解説していきます。
WordPressでMathJaxを使う方法
WordPressで数式を使うには、プラグインを導入する方法、テーマエディターでヘッダーにコードを記述する方法などがあります。ヘッダーにコードを記述すると、全てのページでそのコードが適用されてしまうので、意図しない表示になるページが発生する可能性があります。
今回紹介する方法は、数式を表示させたいページ単体にMathJaxを読み込ませて数式を表示させたいと思います。当ブログのテーマはcocoonですが、cocoon以外のテーマを使用していても同じように使うことができます。
まず、表示させたいページでカスタムHTMLブロックに以下のコードを貼り付けます。
上記コードを貼り付けることで、そのページではMathJax(バージョン3)が有効になります。そして、数式を\(
と\)
で囲むことで、数式を\(TeX\)で表示させることができます。試しにテーラー展開の公式を文中に表示させます。
文章の途中でも、\( 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 \\ 2 \\ 3 \]
改行されているのが分かります。
HugoでMathJaxを使う方法
Hugoの場合でもWordPressと同様に、head要素内に上記のscript要素を追加することでMathJaxが有効になります。
Hugoでは$$
もしくは\\[
と\\]
で囲むことでディスプレイ形式で数式が表示できます。\\(
と\\
で囲むことでインライン形式で表示ができます。
\( 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 \\ 2 \\ 3 \]
改行の書き方もWordPressとちょっと違うので注意しましょう。
当ブログでは数式を用いるシチュエーションはそんなに無いのですが、一部ページでのみ使用することがあったので、ページ単位でMathJaxを使う方法を採用することにしました。以上で記事を終わりにします。