수식
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)$.
Let be Riemann integrable. Let be . Then is continuous, and at all such that is continuous at , is differentiable at with .
블록
수식 블록 또는 디스플레이 모드는 $$
기호와 줄바꿈을 사용합니다.
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
설정
KaTex를 사용하기 위해서는 먼저 remark-math
와 rehype-katex
플러그인을 설치해야 합니다.
- npm
- Yarn
- pnpm
npm install --save remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
yarn add remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
pnpm add remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
정확하게 위에 기재한 버전과 같은 버전을 사용하세요. 최신 버전은 도큐사우루스 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:
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
).
module.exports = {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};
권장 버전 이상으로 rehype-katex 업그레이드
의 최신 기능이 실제 필요한 경우에만 최신 버전을 사용하세요. 대부분의 경우 이전 버전을 사용해도 문제가 없습니다.
최신 버전의 rehype-katex
(v6.0.0
이상)는 아직 도큐사우루스에서 공식적으로 지원하지 않는 자바스크립트의 새로운 모듈 시스템인 ES 모듈을 적용하고 있습니다. 하지만 비동기 구성 생성자를 사용해 rehype-katex
를 동적으로 가져올 수 있습니다. 도큐사우루스는 이 생성자 함수를 호출하고 구성 오브젝트를 반환할 때까지 기다립니다.
async function createConfig() {
// ES 모듈은 `require()` 대신 `import()`를 사용해 비동기식으로 가져옵니다.
const katex = (await import('rehype-katex')).default;
return {
// ...
};
}
이 경우 전체 구성의 변경 사항은 다음과 같습니다.
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;