Skip to main content

DocusaurusのKaTeXをカスタムする

Docusaurus の KaTeX で physics package で定義されているマクロ, mhchem, 独自マクロを使いたい.

KaTeX をインストール​

公式Documentsに従って, KaTeX プラグインをインストールする.

yarn add remark-math@6 rehype-katex@7

docusaurus.config.js を編集して, KaTeXを有効にする.

docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

const config = {
    presets: [
      [
        'classic',
        ({
          docs: {
            remarkPlugins: [remarkMath],
            rehypePlugins: [
              [
                rehypeKatex,
                {
                  throwOnError: true,
                  globalGroup: true,
                },
              ],
            ],
          },
          blog: {
            remarkPlugins: [remarkMath],
            rehypePlugins: [
              [
                rehypeKatex,
                {
                  throwOnError: true,
                  globalGroup: true,
                },
              ],
            ],
          },
        }),
      ],
    ],

  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity: 'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
}

動作チェック:

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
I=∫02πsin⁡(x) dxI = \int_0^{2\pi} \sin(x)\,dx

Physics パッケージを使いたい​

Docusaurusの数式記述でphysicsパッケージで定義されているマクロ(\dv, \eval, ...etc)を使いたい.

katexのphysicsマクロ https://github.com/balthild/katex-physics を発見した. これを試してみる.

まずはインストール.

yarn add katex-physics

このマクロをdocusaurusで有効化する方法がよくわからなかったが, https://stackoverflow.com/questions/72861585/global-macros-for-katex-in-docusaurus によると, docusaurus.config.js を次のように変更すればよさそう.

docusaurus.config.js
import macros from "katex-physics";

rehypePlugins: [
  [
    rehypeKatex,
    {
      throwOnError: true,
      globalGroup: true,
      macros,
    },
  ],
],

動くかチェック.

$$
\dd x \qc \dv{x} \qc \dv{f}{x} \qc
\dv[n]{x} \qc \dv[n]{f}{x} \\

\pd x\qc \pdv{x} \qc \pdv{f}{x} \qc
\pdv[n]{x} \qc \pdv[n]{f}{x} \qc \pdv{f}{x}{y}{z} \\

\qty[\qty(1-n)*\frac{1}{n}] \qc \qty{1+\frac{1}{n}} \qc \qty|1+\frac{1}{n}| \\

\bra{a} \qc \ket{b} \qc \expval{x} \qc
\braket{a}{b} \qc \ketbra{a}{b} \qc \matrixel{a}{b}{c} \\

\mqty(a & b \\ c & d) \qc \mqty[a & b \\ c & d] \qc \mqty{a & b \\ c & d} \qc
\mdet{a & b \\ c & d} \qc \mqty|a & b \\ c & d| \\

\mqty[\dmat{a,b,\cdots}] \qc \mqty[\admat{a,b,\cdots}] \qc
\mqty[\imat{2}] \qc \mqty[\xmat{x}{3}{2}] \qc
$$
dx,d ⁣dx, ⁣df ⁣dx,dn ⁣dxn, ⁣dnf ⁣dxn∂x,∂ ⁣∂x, ⁣∂f ⁣∂x,∂n ⁣∂xn, ⁣∂nf ⁣∂xn, ⁣∂3f ⁣∂x ⁣∂y ⁣∂z[(1−n)∗1n],{1+1n},∣1+1n∣<a∣,∣b>,<x>,<a|b>,∣a><b∣,<a|b|c>(abcd),[abcd],{abcd},∣abcd∣,∣abcd∣[ab⋯],[ab⋯],[1001],[xxxxxx],\dd x \qc \dv{x} \qc \dv{f}{x} \qc \dv[n]{x} \qc \dv[n]{f}{x} \\ \pd x\qc \pdv{x} \qc \pdv{f}{x} \qc \pdv[n]{x} \qc \pdv[n]{f}{x} \qc \pdv{f}{x}{y}{z} \\ \qty[\qty(1-n)*\frac{1}{n}] \qc \qty{1+\frac{1}{n}} \qc \qty|1+\frac{1}{n}| \\ \bra{a} \qc \ket{b} \qc \expval{x} \qc \braket{a}{b} \qc \ketbra{a}{b} \qc \matrixel{a}{b}{c} \\ \mqty(a & b \\ c & d) \qc \mqty[a & b \\ c & d] \qc \mqty{a & b \\ c & d} \qc \mdet{a & b \\ c & d} \qc \mqty|a & b \\ c & d| \\ \mqty[\dmat{a,b,\cdots}] \qc \mqty[\admat{a,b,\cdots}] \qc \mqty[\imat{2}] \qc \mqty[\xmat{x}{3}{2}] \qc

正常に動作している. \grad, \div, \curl, \rot, \vb は使えないらしい.

mhchemを使いたい​

KaTeX には mhcehm extensionが存在する. これをDocusaurusでも使えるようにしたい.

https://github.com/facebook/docusaurus/discussions/9266 に yarn patch を使う方法が示されていたので, これに従う.

yarn patch rehype-katex
➤ YN0000: Package rehype-katex@npm:7.0.0 got extracted with success!
➤ YN0000: You can now edit the following folder: /private/var/folders/j3/cspf25416z1gdtytlcv2ytz80000gn/T/xfs-a942709c/user
➤ YN0000: Once you are done run yarn patch-commit -s /private/var/folders/j3/cspf25416z1gdtytlcv2ytz80000gn/T/xfs-a942709c/user and Yarn will store a patchfile based on your changes.
➤ YN0000: Done in 0s 13ms

/private/var/folders/j3/cspf25416z1gdtytlcv2ytz80000gn/T/xfs-a942709c/user/ に rehype-katex のコピーが作成されるので, これを編集すればよい.

以下を lib/index.js の冒頭に追加する.

lib/index.js
require("katex/dist/contrib/mhchem");

yarn patch-commit でpatchをcommitする.

yarn patch-commit -s /private/var/folders/j3/cspf25416z1gdtytlcv2ytz80000gn/T/xfs-a942709c/user

yarn install を実行すると, patchが反映される.

\ce{^{136}Xe(p,p)^{136}Xe}
X136X22136Xe(p, p)X136X22136Xe\ce{^{136}Xe(p,p)^{136}Xe}

独自マクロを定義する​

独自のマクロを定義して使いたい.

https://stackoverflow.com/questions/72861585/global-macros-for-katex-in-docusaurus を見ると, 次のようにマクロを定義して, これを rehypeKatex に与えれば良いらしい.

docusaurus.config.js
const macros = {
  "\\slashed": "\\cancel{#1}",
  "\\SI": "#1 \\ \\rm{#2}"
};

rehypePlugins: [
  [
    rehypeKatex,
    {
      throwOnError: true,
      globalGroup: true,
      macros,
    },
  ],
],

ただ, すでに macros を katex-physics で使っており, 干渉する..

katex-physics のコードを読むと, こうなっている.

katex-physics/src/main.js
import bracing from "./macros/bracing";
import derivative from "./macros/derivative";
import dirac from "./macros/dirac";
import matrix from "./macros/matrix";
import text from "./macros/text";

const macros =  {
    ...bracing,
    ...derivative,
    ...dirac,
    ...matrix,
    ...text,
};

...

export default macros;

ということは次のような感じにすればいけそう.

docusaurus.config.js
import bracing from "katex-physics/src/macros/bracing";
import derivative from "katex-physics/src/macros/derivative";
import dirac from "katex-physics/src/macros/dirac";
import matrix from "katex-physics/src/macros/matrix";
import text from "katex-physics/src/macros/text";

const macros = {
  ...bracing,
  ...derivative,
  ...dirac,
  ...matrix,
  ...text,
  "\\slashed": "\\cancel{#1}",
  "\\SI": "#1 \\ \\rm{#2}"
};

想定通りに動作している.

$$
\hbar c = \SI{197.326 9631(49)}{MeV\ fm}
$$
ℏc=197.3269631(49) MeV fm\hbar c = \SI{197.326 9631(49)}{MeV\ fm}