まくまくHugo/Goノート
ページ内に Tex 形式の数式を埋め込めるようにする (MathJax)
2018-06-21
Hugo のテンプレートで MathJax という Javascript ライブラリを組み込むと、記事内に Tex 形式の数式を埋め込むことができるようになります。

MathJax を有効にする

まず、すべてのページで次のようにして MathJax.js を読み込む必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

フッター用のパーシャルテンプレート(layouts/partials/footer.html など)を用意しているのであれば、その中に記述しておくのがよいでしょう。

CDN で提供されている最新の MathJax.js のアドレスは、cdnjs.com のサイトMathJax と入力するか、MathJax のサイト で調べることができます。

ページ内に数式を記述する

あとは、Markdown ファイル内で $$数式$$ というフォーマットで記述すれば、きれいな数式が表示されます。

Markdown ファイル内の記述

$$F(x) = \sum_{n=1}^{N} \frac{1}{N}$$

表示例

math-jax1.png

インライン形式で数式を記述できるようにする

通常の文章の中にインライン形式で数式を埋め込むには、MathJax.js の設定を行っておく必要があります。 MathJax.js を読み込む HTML コードと一緒に、次のようなコードを追加してください。

テンプレート抜粋(layouts/partials/footer.html など)

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$']]
  }
});
</script>

上記のように設定しておくと、文章の中に $数式$ というフォーマットで、数式をインラインで埋め込めるようになります。

Markdown ファイル内の記述

次の数式は $F(x) = \sum_{n=1}^{N} \frac{1}{N}$ 文章内に埋め込まれます。

表示例

math-jax2.png

2018-06-21