はじめに
このサイトは、静的サイトジェネレーターの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>