메인 컨텐츠로 이동
버전: 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 [email protected] [email protected] [email protected]
주의

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

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

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

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

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

KaTex CSS를 설정에 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',
  },
],

추가된 설정은 아래와 같은 형태가 됩니다.

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

KaTex 애셋 자체 호스팅​

CDN 소스에서 스타일시트, 글꼴, 자바스크립트 라이브러리를 로드하는 것은 호스팅해야 하는 애셋의 양이 줄어들기 때문에 널리 사용되는 라이브러리나 애셋을 활용하는 좋은 방법입니다. katex.min.css(필수 KaTex 글꼴 포함) 파일을 자체 호스팅하는 경우 KaTex 깃허브 릴리스에서 최신 버전을 내려받고 katex.min.css와 fonts(.woff2 글꼴 유형만 해당) 디렉토리를 여러분의 사이트 static 디렉토리에 복사하고 docusaurus.config.js 파일에서 스타일시트의 href 값을 CDN URL 대신 여러분의 로컬 경로(예 /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/[email protected]/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;