메인 컨텐츠로 이동
버전: 2.x

수식

Mathematical equations can be rendered using KaTeX.

Usage​

Please read KaTeX documentation for more details.

Inline​

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

Let fcolon[a,b]toRf\\colon[a,b] \\to \\R be Riemann integrable. Let Fcolon[a,b]toRF\\colon[a,b]\\to\\R be F(x)=int_axf(t),dtF(x)= \\int\_{a}^{x} f(t),dt. Then FF is continuous, and at all xx such that ff is continuous at xx, FF is differentiable at xx with F′(x)=f(x)F'(x)=f(x).

Blocks​

For equation block or display mode, use line breaks and $$:

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

Configuration​

To enable KaTeX, you need to install remark-math and rehype-katex plugins.

npm install --save remark-math@3 rehype-katex@5 [email protected]
warning

정확하게 위에 기재한 버전과 같은 버전을 사용하세요. 최신 버전은 도큐사우루스 2와 호환되지 않을 수 있습니다.

Import the plugins in docusaurus.config.js:

const math = require('remark-math');
const katex = require('rehype-katex');

Add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

remarkPlugins: [math],
rehypePlugins: [katex],

Include the KaTeX CSS in your config under stylesheets:

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

Overall the changes look like:

docusaurus.config.js
const math = require('remark-math');
const katex = require('rehype-katex');

module.exports = {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [math],
          rehypePlugins: [katex],
        },
      },
    ],
  ],
  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',
    },
  ],
};

Self-hosting KaTeX assets​

Loading stylesheets, fonts, and JavaScript libraries from CDN sources is a good practice for popular libraries and assets, since it reduces the amount of assets you have to host. 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
module.exports = {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};
팁

KaTeX\\KaTeX의 최신 기능이 실제 필요한 경우에만 최신 버전을 사용하세요. 대부분의 경우 이전 버전을 사용해도 문제가 없습니다.

The latest versions of rehype-katex (starting from v6.0.0) has moved to ES Modules, a new module system of JavaScript, which Docusaurus doesn't officially support yet. However, it is possible to import rehype-katex dynamically, using an async config creator. 도큐사우루스는 이 생성자 함수를 호출하고 구성 오브젝트를 반환할 때까지 기다립니다.

docusaurus.config.js
async function createConfig() {
  // ES Modules are imported with `import()` instead of `require()`, and are imported asynchronously
  const katex = (await import('rehype-katex')).default;
  return {
    // ...
  };
}

이 경우 전체 구성의 변경 사항은 다음과 같습니다.

docusaurus.config.js
const math = require('remark-math');

async function createConfig() {
  const katex = (await import('rehype-katex')).default;
  return {
    title: 'Docusaurus',
    tagline: 'Build optimized websites quickly, focus on your content',
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            path: 'docs',
            remarkPlugins: [math],
            rehypePlugins: [katex],
          },
        },
      ],
    ],
    stylesheets: [
      {
        href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;