Skip to main content

数式

KaTeXを利用して数式をレンダリングできます。

使い方​

詳細については、KaTeXのドキュメントに目を通してください。

インライン数式​

インライン数式は、LaTeX式を$で次のように囲って書きます。

$f\colon[a,b]\to\R$をリーマン積分可能な関数とする。 $F\colon[a,b]\to\R$を$F(x)=\int_{a}^{x} f(t)\,dt$と定義する。 このとき、$F$は連続であり、$f$が$x$において連続である全ての$x$において$F$は$x$において微分可能であり、$F'(x)=f(x)$となる。
http://localhost:3000

f ⁣:[a,b]→Rf\colon [a,b] \to \R をリーマン積分可能な関数とする。 F ⁣:[a,b]→RF\colon[a,b]\to\R をF(x)=∫axf(t),dtF(x)= \int_{a}^{x} f(t),dtと定義する。 このとき、FFは連続であり、ffがxxにおいて連続である全てのxxにおいてFFはxxにおいて微分可能であり、F′(x)=f(x)F'(x)=f(x)となる。

別行立て数式​

数式ブロックすなわちディスプレイモードの場合は、改行と$$を利用して次のように書きます。

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

数式を有効化する​

次の手順でKaTeXを有効化してください。

  1. 次のように、remark-mathとrehype-katexプラグインをインストールしてください。

    npm install --save remark-math@6 rehype-katex@7
    警告

    Docusaurus v3（MDX v3を使用）の場合、必ずremark-math 6及びrehype-katex 7を利用するようにしてください。 他のバージョンでの動作は保証しかねます。

  2. これらの2つのプラグインは、 ES Modulesとしてのみ利用可能です。 次のようなES Modules設定ファイルを使用することを推奨します。

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

    export default {
      presets: [
        [
          '@docusaurus/preset-classic',
          {
            docs: {
              path: 'docs',
              remarkPlugins: [remarkMath],
              rehypePlugins: [rehypeKatex],
            },
          },
        ],
      ],
    };
    CommonJS 設定ファイルを使いたい？

    If you decide to use a CommonJS config file, it is possible to load those ES module plugins thanks to dynamic imports and an async config creator function:

    CommonJS module docusaurus.config.js
    module.exports = async function createConfigAsync() {
      return {
        presets: [
          [
            '@docusaurus/preset-classic',
            {
              docs: {
                path: 'docs',
                remarkPlugins: [(await import('remark-math')).default],
                rehypePlugins: [(await import('rehype-katex')).default],
              },
            },
          ],
        ],
      };
    };

  3. stylesheets の下の設定内に、次のようにKaTeXのCSSを含めます。

    export default {
      //...
      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',
        },
      ],
    };
設定ファイルの例を確認
docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
  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',
    },
  ],
};

KaTeXアセットをセルフホスティングする​

スタイルシート、フォント、JavaScriptライブラリをCDNソースから読み込むことは、ホストする資産の量を減らせるため、人気のあるライブラリやアセットを利用する上ではよいやり方です。 katex.min.cssを（必要なKaTeXフォントとともに）セルフホスティングしたい場合は、KaTeXのGitHubリリースから最新版をダウンロードし、katex.min.cssとfontsディレクトリ（.woff2フォントタイプだけで十分）をサイトのstaticディレクトリに展開・コピーし、docusaurus.config.js内の、スタイルシートのhrefをCDNのURLからローカルパス（例：/katex/katex.min.css ）に置換します。

docusaurus.config.js
export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};