Contents

HugoでKaTexを用いて数式を表示する手順

Tuuutti included in Hugo

2024-03-03 220 words 1 minutes

Contents

手順

.\layouts\partials\head に apply-KaTex.html (任意のファイル名) を作成し、以下コードをコピペ

<!-- Loading KaTex scripts extracted from https://katex.org/docs/browser.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"
/>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"
integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4"
crossorigin="anonymous"
></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"
integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {delimiters: [
    {left: "$$", right: "$$", display: true},
    {left: "$", right: "$", display: false}]
    });
});
</script>

.\layouts\_default の baseof.html の <head>タグ に以下コードをコピペ

{{- if .Params.useKaTex}} {{- partial "head/apply-KaTex.html" . -}} {{- end }}

index.md のフロントマターに KaTex のパラメータを追加し、数式を用いたい記事のみ true を設定

参考情報