本サイトでは以前は MathJax を使って数式表示をしていましたが、数式の表示に時間がかかる点が気になっていました。 $\KaTeX$ は MathJax よりもかなり高速に描画が可能 (KaTeX and MathJax Comparison Demo) なライブラリで、描画時間が数十分の一になるようなので導入することにしました。
導入は、KaTeXのREADME および Auto-renderのREADME を参考にしました。
上記説明を参考にして、本サイトでは CDN を利用したので、<head> ... </head>の間の適当な位置に以下を追加しました。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
\[ ... \] や $$ で数式を埋め込みたいので、auto-render extension を利用しました。
本サイトでは以下の命令文を使いました。
<script>
renderMathInElement(document.body, {delimiters: [
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false}
]});
</script>
html 読み込み時に描画する時は </body> の直前に書くとよいらしい。
また JavaScript 中で動的に呼び出す時にも同様に renderMathInElement(elem, options) と書くと描画が可能でした。
上記はv0.10.0-betaの例ですので、最新版をチェックして導入した方がよいかもしれません。
\begin{aligned}...\end{aligned} (利用可能な環境一覧: array, matrix, bmatrix, Bmatrix, pmatrix, vmatrix, Vmatrix, aligned, alignedat, gathered, cases, darray, dcases)\mathrm, \mathbf, \mathit, \mathsf, \mathtt, \textrm, \textbf, \textit, \textsf, \texttt, \rm, \bf, \it, \sf, \tt, \textnormal, \bold, \Bbb, \mathcal, \frak, \text, \boldsymbol, \mathb, \mathscr, \mathfrak, \bm (例：太字ギリシャ文字 \boldsymbol; 数式中のテキスト表示：\text{}).katex { font-size: 1em !important; })