メインコンテンツへスキップ

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

·1078 文字·3 分
目次

はじめに
#

HugoとBlowfishテーマでKaTeXにより数式を描画する方法・注意点、およびサンプルをまとめました。 環境は以下の通りです。

  • Hugo 0.148.2
  • Blowfish 2.89.1

KaTeXとは
#

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

BlowfishでKaTeXを扱う
#

BlowfishテーマでKaTeXを使用するには、Markdownファイルの本文中に以下の行を追加します。

{{< katex >}}

行内に数式を記述する場合、\()\で数式を挟みます。

変数を\(x\)と置く。

上記のMarkdownは以下のようになります。

変数を\(x\)と置く。

一方、一行の独立した数式として記述する場合、$$$$で数式を囲みます。 $$$$の間で数式を改行することが可能です。

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

$$ a \\ b $$

結果:

$$ a \\ b $$

添え字
#

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

$$ a_i = b^n $$

結果:

$$ a_i = b^n $$

連立方程式
#

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

$$ \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とすることも可能です。

$$ \begin{array}{lll} y &=& x+x \\ &=& 2x \end{array} $$

結果:

$$ \begin{array}{lll} y &=& x+x \\ &=& 2x \end{array} $$

ベクトル
#

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

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

結果:

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

行列
#

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

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

結果:

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

結果:

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

結果:

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

波括弧
#

波括弧{ }の前には、バックスラッシュ\を付ける必要があります。 自動的に括弧の大きさを調節する\left\rightを使用する場合も同じく、\が必要。

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

結果:

$$ \{ 0, 10 \} $$

$$ \left\{ \frac{1}{2} \right\} $$

参考
#

Helve
著者
Helve
関西在住、電機メーカ勤務のエンジニア。X(旧Twitter)で新着記事を配信中です

関連記事