経緯

Hugo で運用しているサイトに数式を埋め込む必要があり 調査した結果を備忘録として残しておく

手順

参考 と同じく Mathjax を使用して実現する

  1. partials フォルダ配下に以下のファイルを作成する

CDN で提供されている最新の MathJax.js の URL は、cdnjs.com で確認する

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  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"] }
    }
  });
  MathJax.Hub.Queue(function() {
    // Fix <code> tags after MathJax finishes running. This is a
    // hack to overcome a shortcoming of Markdown. Discussion at
    // https://github.com/mojombo/jekyll/issues/199
    var all = MathJax.Hub.getAllJax(), i;
    for(i = 0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
  });
</script>
  1. 1 で作成した partial を head or footer で読込

例 head で読込

<head>
  ・・・
  {{ partial "mathjax_support.html" . }}
</head>
  1. css を修正(カスタマイズする場合)

css ファイルで以下の要素に対する修飾を記述する

.has-jax {
  font: inherit;
  font-size: 100%;
  background: inherit;
  border: inherit;
  color: #515151;
}

.has-jax > .MathJax_Display {
  text-align: left !important;
}

チートシート

ページ内に数式を記述

[記入例]

$${}_n \mathrm{ P }_k$$

[表示例]

$${}_n \mathrm{ P }_k$$

インライン形式で数式を記述

[記入例]

次の数式は ${}_n \mathrm{ P }_k$ 文章内に埋め込まれます

[表示例]

次の数式は ${}_n \mathrm{ P }_k$ 文章内に埋め込まれます

四則演算

[記入例]

$$1 + 2 = 3$$
$$2 - 3 = 5$$
$$3 \times 2 = 6$$
$$6 \div 3 = 2$$

[表示例]

$$1 + 2 = 3$$ $$2 - 3 = 5$$ $$3 \times 2 = 6$$ $$6 \div 3 = 2$$

分数

[記入例]

$$\frac{1}{2} - \frac{1}{3} = \frac{1}{6}$$
$$\frac{a+b}{2ab}$$

[表示例]

$$\frac{1}{2} - \frac{1}{3} = \frac{1}{6}$$ $$\frac{a+b}{2ab}$$

複数行で =(イコール) の位置を揃える

[記入例]

\begin{align}
f(x) &= x^2+3x+2 \\\\\\
&= (x+1)(x+2)
\end{align}

[表示例]

\begin{align*} f(x) &= x^2+3x+2 \\\ &= (x+1)(x+2) \end{align*}