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>
$$ \begin{bmatrix} a & b \\ c & d \\ \end{bmatrix} $$

行列以外も同様に記述できるはずです。

参考

Hugo公式

LaTeX入門:行列と行列式

comments powered by Disqus