Github PagesでKatexを使ったときのメモ

MathJaxを使用していたが、数式を多用したページの表示が時間がかかってしまうのでKatexに移行しようとした。
数式中の記号や文字もコピペしやすいので人によってはそれもうれしいかも？

参考にしたのは[このページ](https://tex2e.github.io/blog/latex/mathjax-to-katex)
~~Github Pagesを始めるときに選べるテーマ12種（+ Primer）で試してみたら 
ディスプレイ表示の数式は表示されるのに、インライン表示の数式が数式へ変換されない現象が起きたのでそのメモ~~ 

いろいろ間違っている(?)ことがわかったの編集しました。

## Github PagesへのKatexの導入

1. Github PagesのSourceディレクトリに`_config.yml`を作成して`theme`を設定（リポジトリの設定からPagesを有効化してテーマを選ぶと自動で作成・設定される）。
1. Github PagesのSourceディレクトリに`_includes/head-custom.html`を作成（1.で選んだ[テーマのリポジトリ](https://github.com/pages-themes)の`_includes/head-custom.html`をコピペしてくる）。
1. `_includes/head-custom.html`内の最後に以下を追加。

``` html: _includes/head-custom.html
~~~
<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" 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.0/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, {
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false},
      ]
    });
  });
</script>

<!-- end custom head snippets -->
```

Githubのリポジトリにpushして「pages build and deployment」が完了したら反映される。（1～2分）

<details><summary>編集前の内容</summary>

## Github PagesへのKatexの導入

1. Github PagesのSourceディレクトリに`_config.yml`を作成して`theme`を設定（リポジトリの設定からPagesを有効化してテーマを選ぶと自動で作成・設定される）。
1. Github PagesのSourceディレクトリに`_includes/head-katex.html`を作成。
1. Github PagesのSourceディレクトリに`_layouts/default.html`を作成（1.で選んだ[テーマのリポジトリ](https://github.com/pages-themes)の`_layouts/default.html`をコピペしてくる）。
1. `_layouts/default.html`内の`</head>`の手前で`head-katex.html`をインクルード。

``` html: _includes/head-katex.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" 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.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    $("script[type='math/tex']").replaceWith(function () {
      var tex = $(this).text();
      return "<span class=\"kdmath\">$" + tex + "$</span>";
    });
  
    $("script[type='math/tex; mode=display']").replaceWith(function () {
      var tex = $(this).text();
      tex = tex.replace('% <![CDATA[', '').replace('%]]>', '');
      return "<div class=\"kdmath\">$$" + tex + "$$</div>";
    });

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

``` html:_layouts/default.html
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset="UTF-8">
    ~ 省略 ~
  {% seo %}
    {% include head-custom.html %}
    {% include head-katex.html %} <!-- これを追加 -->
  </head>
  <body>
    <a id= ~
```
Githubのリポジトリにpushして「pages build and deployment」が完了したら反映される。（1～2分）

## 一部のテーマでインライン数式が表示されない

たとえば、

```markdown
test $\sqrt{x^2 + y^2}$ test

$$
y=f(x)
$$
```

のように記述した時、正しく動作していれば

test $\sqrt{x^2 + y^2}$ test

$$
y=f(x)
$$

と表示されるはずだが、インライン表示の数式だけ表示されず

test \\$\sqrt{x^2 + y^2}\\$ test

$$
y=f(x)
$$

となってしまう場合があった。

インライン数式が正しく表示できなかったテーマは、
[primer](https://github.com/pages-themes/primer)
[architect](https://github.com/pages-themes/architect)
[slate](https://github.com/pages-themes/slate)
[modernist](https://github.com/pages-themes/modernist)
[tactile](https://github.com/pages-themes/tactile)
[cayman](https://github.com/pages-themes/cayman)
[hacker](https://github.com/pages-themes/hacker)
[minimal](https://github.com/pages-themes/minimal)
[dinky](https://github.com/pages-themes/dinky)

インライン数式も正しく表示できたテーマは、
[merlot](https://github.com/pages-themes/merlot)
[leap-day](https://github.com/pages-themes/leap-day)
[time-machine](https://github.com/pages-themes/time-machine)
[midnight](https://github.com/pages-themes/midnight)
だった。

## 解決方法

ページを開くと

```html
~~~
<script>
  document.addEventListener("DOMContentLoaded", function() {
    $("script[type='math/tex']").replaceWith(function () {
      var tex = $(this).text();
~~~
```

のところで `Uncaught ReferenceError: $ is not defined` のエラーが発生していた。
それぞれのテーマの`_layouts/default.html`を見てみると、
インライン数式が表示できていたテーマではjQuerのCDNを読むスクリプトが書かれていたが、
表示できなかったテーマにはそれがなかった。

`_includes/head-katex.html`の先頭に

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
```

を追加してやればインライン数式も正しく表示されるようになった。

しかし、ディスプレイ数式はなぜ正しく表示できたのかがよくわかっていない...
</details>

***

Github の仕様が変更されていたのか、`type='math/tex'`の部分を書き換える処理がいらないようですね。
そのため、jQueryのロードも必要ありませんでした。
また、 `document.addEventListener("DOMContentLoaded", function() {...});` の `script`タグが無くてもディスプレイ数式は表示されるようです。（インライン数式は表示されない、何故？）

[KatexのGithubリポジトリ](https://github.com/KaTeX/KaTeX)を見ていたら[`Katex/contrib`ディレクトリ](https://github.com/KaTeX/KaTeX/tree/main/contrib)があり

* copy-tex：Clipboard API を使ったコピペの動作を変更
* mathtex-script-type ： `type='math/tex'` の `script`タグの中身をKatexで表示する
* mhchem ： 化学式が書ける`\ce`が使えるようになる

GitHub Pages themes を使っている場合はmhchemしか使えなさそう
GitHub Pages themes に頼らず自分でページを作るなら他2つも有効に使えそう