HugoでLaTex記法を用いて数式（行列）を記述する方法
本ブログは、Go製の静的サイトジェネレータHugoで作られています。 Hugoへ投稿する記事を普段、Markdownで記述していますが、デフォルトだとLaTeX記法による数式の記述には対応しておらず、行列を記述することができませんでした。 公式ページをを参照したところ、MathJaxというJSのライブラリを導入することで、対応できそうでしたので、方法をまとめておきます。
導入
Hugo公式に方法が載っていました。JSのライブラリMath Jaxを導入することで、LaTex記法による数式の表示が可能になります。
導入の方針としては、CDNを使用して、全ての記事ページからMathJaxをロードできるようにしておきます。
まずはじめに以下のhtmlファイルを作成します。
/layouts/partials/add-mathjax-to-page.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>全ての記事からadd-mathjax-to-page.htmlを呼び出すことができるよう、
/layouts/partials/footer.html上部に一行追記しておきます。
<footer>
{{ partial "add-mathjax-to-page.html" . }}
省略..
</footer>これで、準備は完了です。
各記事ページのfooter部分にて CDNを呼び出していることが確認できるはずです。
確認
行列を表示
2×2行列を試しに表示してみます。
以下のように記述します。[[a,b],[c,d]]の2次の正方行列です。
$$
\begin{bmatrix}
a & b \\
c & d \\
\end{bmatrix}
$$
ブラウザで出力される結果はこうなりますよね。
$$
\begin{bmatrix}
a & b
c & d
\end{bmatrix}
$$
ん？期待している結果と違いませんか？
TyporaのようなMarkdownエディタの補完機能だと、2次の正方行列が表示されているのに、Hugoによって出力される結果は、1×3行列になってしまっています。
どうやら、MarkdownとMathJaxのそれぞれが、特定の記号に対する解釈の仕方が異なることから、こういったバグが起こる原因になっているようです。
解決法
少し面倒ですが、数式をdivタグで囲ってあげると解決します。
<div>
$$
\begin{bmatrix}
a & b \\
c & d \\
\end{bmatrix}
$$
</div>
行列以外も同様に記述できるはずです。