메인 컨텐츠로 이동
버전: Canary 🚧

수식

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

Let f ⁣:[a,b]→Rf\colon[a,b] \to \R be Riemann integrable. Let F ⁣:[a,b]→RF\colon[a,b]\to\R be F(x)=∫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).

블록​

수식 블록 또는 디스플레이 모드는 $$기호와 줄바꿈을 사용합니다.

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

설정​

KaTex를 사용하기 위해서는 먼저 remark-math와 rehype-katex 플러그인을 설치해야 합니다.

npm install --save remark-math@5 rehype-katex@6
warning

Make sure to use remark-math >= 5 and rehype-katex >= 6 for Docusaurus v3 (using MDX v2).

Those 2 plugins are now only available as ESM packages, and you will need to import them dynamically.

First, turn your site config into an async config creator function:

docusaurus.config.js
module.exports = async function createConfigAsync() {
  return {
    // your site config...
  };
};

It is now possible to import the plugins dynamically and add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],

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
module.exports = async function createConfigAsync() {
  return {
    title: 'Docusaurus',
    tagline: 'Build optimized websites quickly, focus on your content',
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            path: 'docs',
            remarkPlugins: [(await import('remark-math')).default],
            rehypePlugins: [(await import('rehype-katex')).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',
      },
    ],
  };
};

KaTex 애셋 자체 호스팅​

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