Zennで数式を表示する

公開:2020/09/22
更新:2020/09/23
5 min読了の目安(約3500字TECH技術記事

Zenn では KaTeX\KaTeX による数式表示に対応しているため, 数式を含む記事を書くことができる. そこで本記事では, Zenn において TeX\TeX 数式を表示する方法の概要を述べる.

数式を表示する方法

実例

Zenn の記事においては f(x)=n=14nsin(8nπx)f(x) = \sum^{\infty}_{n=1} 4^{-n} \sin \left(8^n \pi x\right)X2χ(X)(X)\left|X\right| \leq 2^{\chi(X) \ell(X)} といった基本的なインライン数式は勿論, ディスプレイ数式

f(x)=f^(ξ)e2πiξxdξ \gdef\f#1#2{#1f(#2)} \f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x}\,d\xi
pa,b(n)=(B1z1+B2(z1)2+k=1a1Ckzξak+j=1b1Djzξbj)z=0=nab{b1na}{a1nb}+1 \begin{aligned} p_{a, b} (n) &= \left.\left( \frac{B_1}{z-1} + \frac{B_2}{(z-1)^2} + \sum_{k=1}^{a-1} \frac{C_k}{z-\xi_a^k} + \sum_{j=1}^{b-1} \frac{D_j}{z-\xi_b^j} \right)\right|_{z=0} \\ &= \frac{n}{ab} - \left\{\frac{b^{-1}n}{a}\right\} - \left\{\frac{a^{-1}n}{b}\right\} + 1 \end{aligned}
H ⁣om(FG,H)H ⁣om(F,GH) \def\scrHom#1#2{{\mathscr{H}\!\mathit{om}}\,\left(#1, #2\right)} \scrHom{\mathscr{F} \otimes \mathscr{G}}{\mathscr{H}} \enspace \xrightarrow{{}\sim{}} \enspace \scrHom{\mathscr{F}}{\mathscr{G}^{{}\vee{}} \otimes \mathscr{H}}

なども表示できる. このように数学記号, 数式環境, 書体など, TeX\TeX で使われているタイプセットの多くがそのまま使用できる. KaTeX\KaTeX でサポートされている関数は公式のこのページにまとめられている.

書き方

TeX\TeX 数式をインラインで表示するにはドル記号 $ で式を囲む.

  • 入力: 有界な連続関数$f(x) = \sum^{\infty}_{n=1} 4^{-n} \sin \left(8^n \pi x\right)$はどの点$x \in \R$でも微分不可能である.
  • 出力: 有界な連続関数f(x)=n=14nsin(8nπx)f(x) = \sum^{\infty}_{n=1} 4^{-n} \sin \left(8^n \pi x\right)はどの点xRx \in \Rでも微分不可能である.

インライン数式を括る $ について,

  • 先頭 $ の直後
  • 末尾 $ の直前

に空白を入れてはいけない. 例えば $x $, $ x$, $ x^2 $ と書いても数式として認識されない.

ディスプレイ形式で表示するには二重のドル記号 $$ で式を囲む. ただし $$ の前後には空行を入れる.

入力
有界な連続関数

$$ f(x) = \sum^{\infty}_{n=1} 4^{-n} \sin \left(8^n \pi x\right) $$

はどの点$x \in \R$でも微分不可能である.
出力

有界な連続関数

f(x)=n=14nsin(8nπx) f(x) = \sum^{\infty}_{n=1} 4^{-n} \sin \left(8^n \pi x\right)

はどの点xRx \in \Rでも微分不可能である.

また KaTeX\KaTeX に実装されている機能として, \def\newcommand などの数式のマクロを使うことができる. ただし \def\newcommand のスコープはそのコマンドが書かれた数式内に限定される. つまりこの2つで定義されたマクロの有効範囲はドル記号 $ を跨がず, 複数の数式から参照することができない.

記事全体に渡ってグローバルに使用できるマクロを定義するには \gdef コマンドを使うとよい.

入力
$$
    \gdef\mysquare#1{#1^2}
    % \newcommand\mysquare[1]{#1^2}
    \gdef\setcomp#1#2{\left\{#1\mid#2\right\}}
$$

グローバルにマクロが定義されているので, $\mysquare{x}$ や $\mysquare{(ab)}$ のようにインライン数式でも

$$ S^1 = \setcomp{(x, y) \in \mysquare{\R}}{\mysquare{x} + \mysquare{y} = 1} $$

のようにディスプレイ数式でもどこからでも利用できる.
出力
\gdef\mysquare#1{#1^2} % \newcommand\mysquare[1]{#1^2} \gdef\setcomp#1#2{\left\{#1\mid#2\right\}}

グローバルにマクロが定義されているので, x2\mysquare{x}(ab)2\mysquare{(ab)} のようにインライン数式でも

S1={(x,y)R2x2+y2=1} S^1 = \setcomp{(x, y) \in \mysquare{\R}}{\mysquare{x} + \mysquare{y} = 1}

のようにディスプレイ数式でもどこからでも利用できる.

表示処理の詳細

Zenn の処理系のソースコードを覗いてみると

が現在使われているようである. Markdown ファイルから数式を抜き出し, その数式を表示する, という2段階の処理である.

この2つ処理系について, それぞれ以下のページにサンプルが載っている. より詳しい情報についてはそちらを参照されたい.

備考

本記事はローカル環境において執筆したが, Zenn にはオンラインエディターが用意されている. そのため数式込みの記事であっても Web ブラウザーひとつあれば作成が可能であると思われる (未検証).

参考

  1. KaTeX – The fastest math typesetting library for the web
  2. goessner/markdown-it-texmath: Support TeX math equations with your Markdown documents.