본문으로 건너뛰기
버전: 2.1.0

수식

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@3 rehype-katex@5 hast-util-is-element@1.1.0
warning

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

플러그인 항목을 docusaurus.config.js 파일에 추가 설정합니다.

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

여러분의 콘텐츠 플러그인 또는 프리셋 옵션에 추가합니다(일반적인 경우 @docusaurus/preset-classic 문서 옵션).

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

Include the KaTeX CSS in your config under stylesheets:

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

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/katex@0.13.24/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',
    },
  ],
};
팁

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

최신 버전의 rehype-katex(v6.0.0 이상)는 아직 도큐사우루스에서 공식적으로 지원하지 않는 자바스크립트의 새로운 모듈 시스템인 ES 모듈을 적용하고 있습니다. 하지만 비동기 구성 생성자를 사용해 rehype-katex를 동적으로 가져올 수 있습니다. 도큐사우루스는 이 생성자 함수를 호출하고 구성 오브젝트를 반환할 때까지 기다립니다.

docusaurus.config.js
async function createConfig() {
  // ES 모듈은 `require()` 대신 `import()`를 사용해 비동기식으로 가져옵니다.
  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/katex@0.15.2/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;