JavaScriptを有効にしてください

HugoとZZoテーマで使えるKaTeX数式サンプル

 ·   ·   3 min read

はじめに

HugoとZZoテーマでKaTeXにより数式を描画する方法・注意点、およびサンプルをまとめた。Hugoのバージョンは0.79.0/extendedである。

KaTeXとは

KaTeXはHTML上で数式を表示するためのJavaScriptライブラリである。同様のライブラリにMathJaxがあるが、KaTeXは数式の描画が高速な利点がある。
KaTeX, MathJaxともに、数式をTeX風に記述する。

ZZoでKaTeXを扱う

ZZoテーマでKaTeXを使用するには、MarkdownのFront Matterで、librarieskatexを追加する。Front MatterをYAMLで記述する例を以下に示す。

1
2
3
4
5
---
title: HugoとZZoで使えるKaTeX数式サンプル
libraries:
- katex
---

行内に数式を記述する場合は、$で数式を挟む。

1
変数を$x$と置く。

上記のMarkdownは以下のようになる。

変数を$x$と置く。

一方、一行の独立した数式として記述する場合は、$$で数式を囲む。また、$$$$の中で改行することはできない。

また、Hugoのバグか不明だが、不等号≠を\neqで出力すると、斜め線がずれて表示される(もしこのページを閲覧されているときに正しく表示されていれば、バグが修正されている)。

1
$ a \neq b $

結果:
$ a \neq b $

また、改行する場合はバックスラッシュ\を3つ重ねる必要がある。

1
$ a \\\ b $

結果:
$ a \\ b $

添え字

下付き添え字は_, 上付き添え字は^を使用する。

1
$ a_i = b^n $

結果:
$ a_i = b^n $

連立方程式

連立方程式を表示するには、casesで式を囲む。
casesではなく、numcasessubnumcasesとすると表示されないので注意。

1
$$ \begin{cases} 2x + 4y = 10 \\\ x + 3y = 6 \end{cases} $$

結果:
$$ \begin{cases} 2x + 4y = 10 \\ x + 3y = 6 \end{cases} $$

複数行にまたがる数式

複数行にまたがる数式において等号の位置を揃えるには、array環境を使う。arrayの後ろの位置揃えが必要なので注意すること。lllは全て左揃えであることを意味する(l: 左、c: 中央、r: 右)。
arrayではなくalignとすると表示されないので注意。

1
$$ \begin{array}{lll} y &=& (x+1)^2 \\\ &=& x^2 + 2x + 1 \end{array} $$

結果:
$$ \begin{array}{lll} y &=& (x+1)^2 \\ &=& x^2 + 2x + 1 \end{array} $$

ベクトル

太字のベクトルを表示するにはbm, 矢印付きのベクトルを表示するにはvecを用いる。

1
$ \bm{a}, \vec{b} $

結果:
$ \bm{a}, \vec{b} $

行列

行列を出力するにはいくつか方法があり、arraypmatrix, bmatrixが使える。

1
$$ \left[ \begin{array}{cc} a & b \\\ c & d \end{array} \right] $$

結果
$$ \left[ \begin{array}{cc} a & b \\ c & d \end{array} \right] $$

1
$$ \begin{pmatrix} a & b \\\ c & d \end{pmatrix} $$

結果
$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} $$

1
$$ \begin{bmatrix} a & b \\\ c & d \end{bmatrix} $$

結果
$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} $$

波括弧

波括弧{ }の前には、バックスラッシュ\を2つ重ねる必要がある(通常のTeXでは1つだけ必要)。
自動的に括弧の大きさを調節する\left\rightを使用する場合も同じく、\が2つ必要。

1
2
$$ \\{ 0, 10 \\} $$
$$ \left\\{ \frac{1}{2} \right\\} $$

結果
$$ \{ 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コマンド集

シェアする
ブログランキングに参加中です。クリックして頂けると励みになります。

Helve
WRITTEN BY
Helve
関西在住、電機メーカ勤務のエンジニア。Twitterで新着記事を配信中です