ブログに数式を表示したい。
解決方法
MathJaxという、数式描画用のJavaScriptライブラリを使用する。
今回は、Hugoのrender_hooksを利用し、以下のコードブロックで数式を表示できるようにする。
```mathjax
(ここにMathJaxのルールに従った数式を記載)
$$ y = \sin(x) $$
$$ y = x^2 $$
$$ y = \log_2 x $$
```
- 数式の表示例
(ここにMathJaxのルールに従った数式を記載)
$$ y = \sin(x) $$
$$ y = x^2 $$
$$ y = \log_2 x $$
render_hooksの内容
themes/kantas/layouts/_default/_markup/render-codeblock-mathjax.htmlを作成し、以下を記載する。
<div class="mathjax">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "useMathJax" true }}
themes/kantas/layouts/_default/baseof.htmlに、以下を記載し、MathJaxのコードブロックを呼び出し時に、MathJaxのライブラリを読み込むようにする。
<html>
<!-- 略 -->
<body>
<!-- 略 -->
{{ if or (.Page.Store.Get "useMathJax") .Page.Params.useMathJax }}
<script>
MathJax = {
chtml: {
matchFontHeight: false
},
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
{{ end }}
<!-- 略 -->
</body>
</html>
また、ページのFront MatterにuseMathJax: trueを記載している場合も、MathJaxのライブラリを読み込むようにする。
これにより、コードブロックを未使用の場合でも、$ \sin(\theta) $と記載すれば、$ \sin(\theta) $ というようにインラインで数式を表示できる。