跳到主要内容

数学公式

Mathematical equations can be rendered using 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

Configuration

如需启用 KaTeX,你需要安装 remark-mathrehype-katex 两个插件。

npm install --save remark-math@5 rehype-katex@6
警告

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

stylesheets 配置项中包含 KaTeX 的 CSS 文件:

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

所有修改总结如下:

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/katex@0.13.24/dist/katex.min.css',
type: 'text/css',
integrity:
'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
crossorigin: 'anonymous',
},
],
};
};

Self-hosting KaTeX assets

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