MathJaxを使用していたが、数式を多用したページの表示が時間がかかってしまうのでKatexに移行しようとした。
数式中の記号や文字もコピペしやすいので人によってはそれもうれしいかも？
参考にしたのはこのページ
Github Pagesを始めるときに選べるテーマ12種（+ Primer）で試してみたら
ディスプレイ表示の数式は表示されるのに、インライン表示の数式が数式へ変換されない現象が起きたのでそのメモ
いろいろ間違っている(?)ことがわかったの編集しました。
Github PagesへのKatexの導入
- Github PagesのSourceディレクトリに
_config.ymlを作成してthemeを設定（リポジトリの設定からPagesを有効化してテーマを選ぶと自動で作成・設定される）。 - Github PagesのSourceディレクトリに
_includes/head-custom.htmlを作成（1.で選んだテーマのリポジトリの_includes/head-custom.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分）
編集前の内容
Github PagesへのKatexの導入
- Github PagesのSourceディレクトリに
_config.ymlを作成してthemeを設定（リポジトリの設定からPagesを有効化してテーマを選ぶと自動で作成・設定される）。 - Github PagesのSourceディレクトリに
_includes/head-katex.htmlを作成。 - Github PagesのSourceディレクトリに
_layouts/default.htmlを作成（1.で選んだテーマのリポジトリの_layouts/default.htmlをコピペしてくる）。 -
_layouts/default.html内の</head>の手前で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>
<!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分）
一部のテーマでインライン数式が表示されない
たとえば、
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
architect
slate
modernist
tactile
cayman
hacker
minimal
dinky
インライン数式も正しく表示できたテーマは、
merlot
leap-day
time-machine
midnight
だった。
解決方法
ページを開くと
~~~
<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の先頭に
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
を追加してやればインライン数式も正しく表示されるようになった。
しかし、ディスプレイ数式はなぜ正しく表示できたのかがよくわかっていない...
Github の仕様が変更されていたのか、type='math/tex'の部分を書き換える処理がいらないようですね。
そのため、jQueryのロードも必要ありませんでした。
また、 document.addEventListener("DOMContentLoaded", function() {...}); の scriptタグが無くてもディスプレイ数式は表示されるようです。（インライン数式は表示されない、何故？）
KatexのGithubリポジトリを見ていたらKatex/contribディレクトリがあり
- copy-tex：Clipboard API を使ったコピペの動作を変更
- mathtex-script-type ：
type='math/tex'のscriptタグの中身をKatexで表示する - mhchem ： 化学式が書ける
\ceが使えるようになる
GitHub Pages themes を使っている場合はmhchemしか使えなさそう
GitHub Pages themes に頼らず自分でページを作るなら他2つも有効に使えそう