はてなブログでKaTeXにより数式を表示する．
動機
この章の内容は実装には必要ない．方法は次章に記す．
(これは章なのか?) (記す．か記した．かどちらが良いか?)
はてなブログで数式を表示したい．
はてなブログの編集には次の編集モードが使用できる．
が使用できる．どれを用いても数式が表示できる．ただし，
- WYSIWYG: 編集にGUIの操作が必要であるため，面倒かつ非効率的であると思う．
- Markdown: 使いづらかった．普段，MarkdownをObsidianを使用しているためMarkdownが使えれば都合が良かった．しかし，はてなブログにおいては非常に使いづらいものであった．特に，箇条書き，改行･段落の処理が煩わしかった．
上のような理由ではてな記法を使っているため，はてな記法において数式を表示する方法についてのみ記す．
(実際にはほぼ同じ方法でMarkdownでも同様に数式が表示できるとは思う．)
はてな記法では[tex:]と書くと，TeXの数式が表示できる．
余談．
はてな記法では，コードなどを表示するための機能に
- pre記法
- スーパーpre記法
があるが，どちらもブロックでしか表示できず，インラインでは表示できない．
インライン表示をするには，
<code> テキスト </code>
のようにする．なお，preタグを使用するとブロックが出現する．その中でcodeタグを使用すると挙動がおかしくなる．
はてなブログでは本文でHTMLタグが使える．しかし，他の記法によるハイライトがされるため，HTMLタグは挙動を確認しながら使う必要があり，多用はしたくない．
余談2.
コードブロックの調整もできるらしい．これも課題．
閑話休題．
[tex:]をいちいち書くのは面倒である（唐突）．よって，他の方法を使用する．
Webページで数式を表示するには，MathJaxやKaTeXがよく使用される．
マニュアルを参照したところ，MathJaxの方が設定しやすいように思った．しかし，後発のKaTeXでは描写速度などが優れているようである．そこで，ここではKaTeXを使用する．
導入方法はマニュアルを参照すれば良い．
ここでは，それを参考にして実際に導入する手順を記す．
KaTeXの導入と使用
とりあえず使ってみる
マニュアルの Installation > Browser の Starter template から引用．
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous"> <!-- The loading of KaTeX is deferred to speed up page rendering --> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" 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.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
これをブログの[https://help.hatenablog.com/entry/config/detail#head要素にメタデータを追加:title=設定 > 詳細設定 >
要素にメタデータを追加] (←リンクが適切に表示されない．<!-- -->
内のコメントは不要←インラインで表示できん…)．
CSS 読み込み > CDNから基本のJSを読み込み (defer) > 数式の自動表示用 JS読み込み (defer)
という流れになっている (適当) ．
@0.16.9 はバージョンを表す．これを取れば最新版が読み込まれる． @0.16とすればo.16.*のうち最新版が読み込まれる．@1も同様．
ただし，これをするにはintegrityプロパティを書き換える必要がある．
書き換え後のプロパティはjsDelivrのKaTeXのページからコピーする．
Version: から希望のバージョンを選択．コピーボタンを押下．"~ + SRI"を押下．こうするとコピーされる．
ただし，"~ + SRI"が表示されなかった．再読込によりJSの方では出現したが，CSSでは出現しなかった．そのため，マニュアルのコードをコピーし，バージョンを固定して使用することにする．
onloadプロパティについては，マニュアルの Usage > Auto-render Extension > Usageに記載がある．
上の設定では，auto-render scriptが読み込まれたあとにrenderMathInElementが呼び出され，document.body要素内で数式が解釈される．
実際に使う設定
ここではonloadは使わず先のマニュアル内にある方法で記述する．
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous" /> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js" integrity="sha384-ww/583aHhxWkz5DEVn6OKtNiIaLi2iBRNZXfJRiY1Ai7tnJ9UXpEsyvOITVpTl4A" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js" integrity="sha384-ifpG+NlgMq0kvOSGqGQxW1mJKpjjMDmZdpKGq3tbvD3WPhyshCEEYClriK/wRVU0" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { renderMathInElement(document.getElementById("main-inner"), { delimiters: [ {left: "\\[", right: "\\]", display: true}, {left: "$", right: "$", display: false}, {left: "\\begin{equation}", right: "\\end{equation}", display: true}, ], strict : true, globalGroup : true, }); }); </script>
3-5行目はExtensionである．
Extensionについてはマニュアルの Usage > Extensions & Libraries に記載がある．
むやみにscriptを読み込むと読み込み時間の増大につながると思われるが，すべて導入しても目に見えて遅くなることはなかった．deferの恩恵もあるかもしれない．
getElementByIdによって，idがmain-innerの要素内にKaTeXを適用している．これは，はてなブログにおいてインスペクターを起動するとわかると思うが，本文 (タイトル含む) がこれに囲まれている．よってこの中にのみKaTeXを適用すれば良い．
delimitersは数式を囲む記号を定義する．
\が二つあるのはscriptをHTML内に記述する際のエスケープ処理である．
上の場合，本文で\[ \]内に数式を記述する．
strict，globalGroupはオプションである．これについては，マニュアルの Configuring KaTeX > Optionsに記載がある．
strictは構文処理の厳格さについて，globalGroupはマクロをページ内でグローバルに定義するかの設定である．
