経緯
Hugo で運用しているサイトに数式を埋め込む必要があり 調査した結果を備忘録として残しておく
手順
-
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 で作成した partial を head or footer で読込
例 head で読込
<head> ・・・ {{ partial "mathjax_support.html" . }} </head> -
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*}