Hugoで数式を使いたい

デフォルトではLaTeXなどの数式を使用できたいため、MathJaxというJavaScriptのディスプレイエンジンを使用することで数式を使用できるようにします。

MathJaxについて

MathJaxは、LaTeX、MathML、AsciiMath記法のためのオープンソースのJavaScript表示エンジンで、全てのモダンなブラウザで動作します。

導入は非常に簡単で、Hugoに導入する場合はスニペットを二行追加するだけで終わります。

HugoにMathJaxを導入する

Getting Startedを参照して必要なスクリプトをコピーしてthemeに追加します。

スクリプト

直接またはテンプレートやテーマエンジンを介してHTMLを書く場合、以下のスニペットをページに追加することでMathJaxを組み込むことができます。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

themeへの取り込み

Hugoで使用しているテーマに合わせて貼り付ける場所を特定して、スクリプトを貼り付けます。

私の場合は、以下のcustom.htmlに貼り付けました。

themes/hugo-theme-stack/layouts/partials/footer/custom.html

custom.htmlはinclude.htmlで呼ばれて、追加したスクリプトがfooterに追加されているのと同様に動作させることができます。

themes/hugo-theme-stack/layouts/partials/footer/include.html

{{ partialCached "footer/components/script.html" . }}
{{ partialCached "footer/components/custom-font.html" . }}
{{ partial "footer/custom.html" . }}

このように、非常に少ないスクリプトを追加するだけで数式が使えるようになるので、数式でつまずいたらまずやってみると良いと思います。