🔢

Zennで数式を表示する

2020/09/23に公開

math

tech

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

数式を表示する方法

実例

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

\gdef\f#1#2{#1f(#2)} \f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x}\,d\xi

\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}

\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$ で使われているタイプセットの多くがそのまま使用できる. $\KaTeX$ でサポートされている関数は公式のこのページにまとめられている.

書き方

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

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

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

入力

有界な連続関数

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

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

出力

有界な連続関数

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

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

2024-01-24 追記に関する技術メモ

Zennのソースコードで $\KaTeX$ の実現をしていると思われる部分: katex.ts
グローバルマクロを使うには katex.render のオプションで globalGroup のフラグを設定する必要がある: Options · KaTeX
この設定を有効にするにはセキュリティの観点で気がかりな点がある: API · 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\}}

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

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

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

表示処理の詳細

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

$\TeX$ 数式込み Markdown 文書のパーサーとして markdown-it-texmath,
数式のタイプセッティングとして $\KaTeX$

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

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

備考

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

Zennで数式を表示する

数式を表示する方法

実例

書き方

表示処理の詳細

備考

参考

Discussion