私は,HugoでPaperModと呼ばれるテーマを使ってこのブログを作っているのですが,デフォルトでは数式の表示に対応していないらしいです.
どうなるか
インラインモード
$x$と$y$という変数を足したらどうなるかな.$\sum_{k=0}^n \frac{x^k}{y}$にはならないよ.
$x$と$y$という変数を足したらどうなるかな.$\sum_{k=0}^n \frac{x^k}{y}$にはならないよ.
ディスプレイモード
$$
x + y \neq \sum_{k=0}^n \frac{x^k}{y}
$$
$$ x + y \neq \sum_{k=0}^n \frac{x^k}{y} $$
どうやるのか
PaperModのデモサイト1では,数式表示に対応させる方法が書いてあります.
layouts/partials/extend_head.html
に以下のコードを追加してください.KaTeXのドキュメント2のコードをコピペです.
{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js" integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
{{ end }}
すると,デフォルトではKaTeXがオフになりますが,markdownファイルのトップにmath: true
とすることでKaTeXを有効化させることができます.
---
title: "KaTeXに対応させた話"
date: 2022-03-23T08:26:59+09:00
author: "chizuchizu"
...
math: true
---
KaTeXの読み込みは遅いらしいので,デフォルトはオフにしたほうが良いらしいです.