ホーム
記事一覧
プライバシーポリシー
免責事項
お問い合わせ

MathJaxを使ってHugoで数式を書く方法

2018-09-17

Hugo で MathJaxを使う方法

今回は Hugo で綺麗な数式を書くために MathJax を導入してみます。 MathJax を導入することで Latex の綺麗な数式を markdown で実現できるようになります。

導入方法

導入方法は 公式サイトにありました。

まずは、下記のスクリプトを html の head に記述します。

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

これで markdown で書いた数式が html に描画されるはずです。

試しに数式を書いてみます。MathJax では次のように\$\$数式\$\$とするとディスプレイ表示の数式がかけます。

$$ y = ax + b $$

綺麗に出力されていますね!

しかし、これだけではインライン表示がうまくいかないです。なので、次のコードを追記します。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: ['\\(','\\)']],
      displayMath: [['$$','$$'], ['\[','\]']],
      processEscapes: true,
      processEnvironments: true,
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      TeX: { equationNumbers: { autoNumber: "AMS" },
           extensions: ["AMSmath.js", "AMSsymbols.js"] }
    }
  });
</script>

これでディスプレイ表示だけでなく、\(\sum_{n = 0}^{\infty} \frac{1}{x}\)のように文中にも数式が書けます!

まとめ

調べたら公式ですぐにコードが見つかったのはありがたかったです。markdown で綺麗な数式かけるのは本当に便利ですね。 ゴリゴリ tex で書いてた学生時代が懐かしいです。