跳到主要内容
版本:Canary 🚧

数学公式

数学方程可通过 KaTeX 渲染。

用法

请参阅 KaTeX 文档以了解详情。

行内公式

要书写行内公式,可以把 LaTeX 公式用 $ 包裹:

$f\colon[a,b]\to\R$ 为一个黎曼可积的函数。 令 $F\colon[a,b]\to\R$ 等于 $F(x)=\int_{a}^{x} f(t)\,dt$。 因此,$F$ 是连续的,并且对于所有使得 $f$$x$ 处连续的 $x$$F$ 都在 $x$ 处可微,并且有 $F'(x)=f(x)$.
http://localhost:3000

f ⁣:[a,b]Rf\colon[a,b]\to\R 为一个黎曼可积的函数。 令 F ⁣:[a,b]RF\colon[a,b]\to\R 等于 F(x)=axf(t)dtF(x)=\int_{a}^{x} f(t)\,dt。 因此,FF 是连续的,并且对于所有使得 ffxx 处连续的 xxFF 都在 xx 处可微,并且有 F(x)=f(x)F'(x)=f(x).

块级公式

要书写块级公式(也就是显示模式 display mode),要使用 $$ 和一个换行:

$$
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-mathrehype-katex 两个插件。

注意

注意使用完全相同的版本。 最新版本与 Docusaurus 2 不兼容。

docusaurus.config.js 中导入插件:

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

把它们添加到你的内容插件或预设选项(通常是 @docusaurus/preset-classic 的 docs 选项):

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

stylesheets 配置下添加 KaTeX CSS:

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 源加载样式表、字体和 JavaScript 库,因为这样减少了你必须自己托管的资源量。 如果你想要自托管 katex.min.css(以及必需的 KaTeX 字体),你可以从 KaTeX 的 GitHub 发布处下载最新版本,解压并复制 katex.min.cssfonts 目录(只复制.woff2 字体类型应该足够了)到你的网站的 static 目录。然后,把 docusaurus.config.js 中样式表的 href 从 CDN URL 替换成你的本地路径(比如 /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 模块。这是一个新的 JavaScript 模块系统,Docusaurus 尚未正式支持。 然而,你可以通过导出一个异步配置创造器 (async config creator) 来动态导入 rehype-katex。 Docusaurus 会调用这个创造器,并等待它返回真正的配置对象。

docusaurus.config.js
async function createConfig() {
// ES 模块需要用 `import()` 而不是 `require()` 导入,并且是异步导入的
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/kate[email protected]/dist/katex.min.css',
type: 'text/css',
integrity:
'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
crossorigin: 'anonymous',
},
],
};
}

module.exports = createConfig;