수식
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
$$
Enabling math equations
Enable KaTeX:
-
Install the
remark-math
andrehype-katex
plugins:- npm
- Yarn
- pnpm
npm install --save remark-math@6 rehype-katex@7
yarn add remark-math@6 rehype-katex@7
pnpm add remark-math@6 rehype-katex@7
경고Make sure to use
remark-math 6
andrehype-katex 7
for Docusaurus v3 (using MDX v3). We can't guarantee other versions will work. -
These 2 plugins are only available as ES Modules. We recommended to use an ES Modules config file:
ES module docusaurus.config.jsimport remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
},
},
],
],
};Using a CommonJS config file?
If you decide to use a CommonJS config file, it is possible to load those ES module plugins thanks to dynamic imports and an async config creator function:
CommonJS module docusaurus.config.jsmodule.exports = async function createConfigAsync() {
return {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],
},
},
],
],
};
}; -
Include the KaTeX CSS in your config under
stylesheets
:export 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',
},
],
};
See a config file example
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default {
title: 'Docusaurus',
tagline: 'Build optimized websites quickly, focus on your content',
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
},
},
],
],
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
).
export default {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};