hugoでKaTeX(LaTeX風数式表示)を有効にする方法
KaTeXとは KaTeXは、LaTeX風の数式をHTMLで表示するためのjavascriptライブラリです。 具体的には下記のような数式を表示することができます。 $$f(x) = x^2 + x + 41$$ 他にもLaTeX風な数式表示ライブラリもあるようですが、KaTeXはシンプルで高速と定評があるようです。 hugoへの導入方法 hugoのフォルダ階層でlayouts/partials/math.htmlを新規作成します。 中身は下記の通りにしてください。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { renderMathInElement( document.body, { delimiters: [ {left: "$$", right: "$$", display: true}, {left: "\\[", right: "\\]", display: true}, {left: "$", right: "$", display: false}, {left: "\\(", right: "\\)", display: false} ] }); }); </script> 次に既存のファイルlayouts/partials/extend_head.htmlに下記のコードを追加します。 {{ if or ....