メインコンテンツへスキップ
バージョン: 3.5.2

数式

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

使用方法​

詳細は KaTeX のドキュメントをご覧ください。

インライン​

LaTeX 数式を `$` で囲むことで、インライン数式を記述できます。

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
$f$ is continuous at $x$, $F$ is differentiable at $x$ with $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 モジュールのみで利用可能です。 ES モジュール の設定ファイルを使用することをお勧めします。

    ES モジュール 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 の設定ファイルを使用していますか？

    CommonJS の設定ファイルを使用する場合、動的インポートと非同期設定作成関数を使用することで、これらの ES モジュールプラグインを読み込むことができます。

    CommonJS モジュール 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/[email protected]/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/[email protected]/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',
    },
  ],
};