Skip to main content

数式

Mathematical equations can be rendered using KaTeX.

See below how to activate them.

使い方​

Please read the KaTeX documentation for more details.

インライン数式​

Write inline math equations by wrapping LaTeX equations between $:

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)となる。

別行立て数式​

For equation block or display mode, use ```math fenced code blocks.

```math
I = \int_0^{2\pi} \sin(x)\,dx
```

You can also use line breaks and $$, although this syntax relies on a Markdown syntax extension and is less portable:

$$
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. Install the remark-math and rehype-katex plugins:

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

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

  2. These 2 plugins are only available as ES Modules. We recommended to use an ES Modules config file:

    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],
            },
          },
        ],
      ],
    };

    Using a CommonJS config file?

    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. Include the KaTeX CSS in your config under stylesheets:

    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',
        },
      ],
    };
See a config file example
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ソースから読み込むことは、ホストする資産の量を減らせるため、人気のあるライブラリやアセットを利用する上ではよいやり方です。 In case you prefer to self-host the katex.min.css (along with required KaTeX fonts), you can download the latest version from KaTeX GitHub releases, extract and copy katex.min.css and fonts directory (only .woff2 font types should be enough) to your site's static directory, and in docusaurus.config.js, replace the stylesheet's href from the CDN URL to your local path (say, /katex/katex.min.css).

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