本サイトでは以前は MathJax を使って数式表示をしていましたが、数式の表示に時間がかかる点が気になっていました。 $\KaTeX$ は MathJax よりもかなり高速に描画が可能 (KaTeX and MathJax Comparison Demo) なライブラリで、描画時間が数十分の一になるようなので導入することにしました。
導入は、KaTeXのREADME および Auto-renderのREADME を参考にしました。
上記説明を参考にして、本サイトでは CDN を利用したので、<head> ... </head>
の間の適当な位置に以下を追加しました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/contrib/auto-render.min.js" integrity="sha384-IiI65aU9ZYub2MY9zhtKd1H2ps7xxf+eb2YFG9lX6uRqpXCvBTOidPRCXCrQ++Uc" 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.9.0の例ですので、最新版をチェックして導入した方がよいかもしれません。
\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; }
)