※記事内に商品プロモーションを含むことがあります。
はじめに
HugoとZZoテーマでKaTeXにより数式を描画する方法・注意点、およびサンプルをまとめた。Hugoのバージョンは0.79.0/extendedである。
KaTeXとは
KaTeXはHTML上で数式を表示するためのJavaScriptライブラリである。同様のライブラリにMathJaxがあるが、KaTeXは数式の描画が高速な利点がある。
KaTeX, MathJaxともに、数式をTeX風に記述する。
ZZoでKaTeXを扱う
ZZoテーマでKaTeXを使用するには、MarkdownのFront Matterで、librariesにkatexを追加する。Front MatterをYAMLで記述する例を以下に示す。
|
|
行内に数式を記述する場合は、$で数式を挟む。
|
|
上記のMarkdownは以下のようになる。
変数を$x$と置く。
一方、一行の独立した数式として記述する場合は、$$で数式を囲む。また、$$～$$の中で改行することはできない。
また、Hugoのバグか不明だが、不等号≠を\neqで出力すると、斜め線がずれて表示される（もしこのページを閲覧されているときに正しく表示されていれば、バグが修正されている）。
|
|
結果：
$ a \neq b $
また、改行する場合はバックスラッシュ\を3つ重ねる必要がある。
|
|
結果：
$ a \\ b $
添え字
下付き添え字は_, 上付き添え字は^を使用する。
|
|
結果：
$ a_i = b^n $
連立方程式
連立方程式を表示するには、casesで式を囲む。
casesではなく、numcasesやsubnumcasesとすると表示されないので注意。
|
|
結果：
$$ \begin{cases} 2x + 4y = 10 \\ x + 3y = 6 \end{cases} $$
複数行にまたがる数式
複数行にまたがる数式において等号の位置を揃えるには、array環境を使う。arrayの後ろの位置揃えが必要なので注意すること。lllは全て左揃えであることを意味する(l: 左、c: 中央、r: 右)。
arrayではなくalignとすると表示されないので注意。
|
|
結果：
$$ \begin{array}{lll} y &=& (x+1)^2 \\ &=& x^2 + 2x + 1 \end{array} $$
ベクトル
太字のベクトルを表示するにはbm, 矢印付きのベクトルを表示するにはvecを用いる。
|
|
結果：
$ \bm{a}, \vec{b} $
行列
行列を出力するにはいくつか方法があり、arrayやpmatrix, bmatrixが使える。
|
|
結果
$$ \left[ \begin{array}{cc} a & b \\ c & d \end{array} \right] $$
|
|
結果
$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} $$
|
|
結果
$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} $$
波括弧
波括弧{ }の前には、バックスラッシュ\を2つ重ねる必要がある（通常のTeXでは1つだけ必要）。
自動的に括弧の大きさを調節する\leftと\rightを使用する場合も同じく、\が2つ必要。
|
|
結果
$$ \{ 0, 10 \} $$
$$ \left\{ \frac{1}{2} \right\} $$
参考
HugoのZZoテーマのKaTeX数式サンプル
Katex support – Hugo Zzo Theme
上記ページのMarkdownファイル (GitHub)
hugo-theme-zzo_test-katex.md at master · zzossig_hugo-theme-zzo
このページにはKaTeXで利用可能な数式を全て記載しきれないが、基本的にはLaTeXに準じているので、以下のページを参考にされたい。
LaTeXコマンド集
