更新日:2021.06.23  作成日:2020.02.24

MathJaxを用いてHugoで数式を表現する

はじめに

 このサイトは、静的サイトジェネレーターのHugoで作成しています。 既存のままではWebブラウザ上で数式を表示することができないため、MathJaxというJSライブラリを導入し数式を表現します。

設定方法

 コンテンツ配信ネットワーク(CDN)を介してMathJaxのJSライブラリを使用します。 MathJaxの公式ページを参考に設定を反映させていきます。

 まず、以下のhtmlファイルを新しく作成します。

add_mathjax.html

<script>
    MathJax = {
        tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
        }
    };
</script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

 次に、常にどの記事でもMathjaxのJSライブラリをロードするために、headerファイルに以下を追記します。(footer.htmlでも良いです。常に利用する箇所に記載します。)

header.html

{{ partial "add_mathjax.html" . }}

これで数式が表現できるようになりました。

動作確認

 簡単に、Markdownでの数式の記述方法とその結果をまとめておきます。(自分のメモも踏まえて

四則演算

$$a + b = c \tag{1}$$
$$a - b = c \tag{2}$$
$$a \times b = c \tag{3}$$
$$a \div b = c \tag{4}$$

$$a + b = c \tag{1}$$ $$a - b = c \tag{2}$$ $$a \times b = c \tag{3}$$ $$a \div b = c \tag{4}$$

分数

$$\frac{a+b}{2ab} \tag{5}$$

$$\frac{a+b}{2ab} \tag{5}$$

乗数

$$x^{2} \tag{6}$$

$$x^{2} \tag{6}$$

下文字

$$x_{i} \tag{7}$$

$$x_{i} \tag{7}$$

平方根

$$\sqrt{a} \tag{8}$$

$$\sqrt{a} \tag{8}$$

三角関数

$$\sin^2 x + \cos^2 x = 1 \tag{9}$$

$$\sin^2 x + \cos^2 x = 1 \tag{9}$$

対数関数

$$2\log_x y \tag{10}$$

$$2\log_x y \tag{10}$$

積分

$$\int_{a}^{b}f(x)dx \tag{11}$$

$$\int_{a}^{b}f(x)dx \tag{11}$$

総和(シグマ)

$$\sum_{k=1}^{n}k \tag{12}$$

$$\sum_{k=1}^{n}k \tag{12}$$

行列

行列表現は下記のように表示されてしまい、思ったような表示がされません。

$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\tag{14}
$$

$$ \begin{bmatrix} a & b \
c & d \end{bmatrix} \tag{14} $$

そこで、数式をdivで囲むことにより期待通りの表示ができました。

<div>
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\tag{13}
$$
</div>

<div>
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\tag{14}
$$
</div>
$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \tag{13} $$
$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} \tag{14} $$

参考