数学公式
数学方程可通过 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)$.
令 为一个黎曼可积的函数。 令 等于 。 因此, 是连续的,并且对于所有使得 在 处连续的 , 都在 处可微,并且有 .
块级公式
要书写块级公式(也就是显示模式 display mode),要使用 $$
和一个换行:
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
配置
要启用 KaTeX,你需要安装 remark-math
和 rehype-katex
两个插件。
- npm
- Yarn
- pnpm
npm install --save [email protected] [email protected] [email protected]
注意使用完全相同的版本。 最新版本与 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',
},
],
总的更改看起来就像这样:
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.css
和 fonts
目录(只复制.woff2
字体类型应该足够了)到你的网站的 static
目录。然后,把 docusaurus.config.js
中样式表的 href
从 CDN URL 替换成你的本地路径(比如 /katex.min.css
)。
module.exports = {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};
把 rehype-katex 升级到推荐版本之上
只有当你真的需要 的最新功能时,才考虑使用新版本。 大多数用户应该用较旧的版本也能达到一样的效果。
rehype-katex
的最新版本(从 v6.0.0
开始)已经迁移到 ES 模块。这是一个新的 JavaScript 模块系统,Docusaurus 尚未正式支持。 然而,你可以通过导出一个异步配置创造器 (async config creator) 来动态导入 rehype-katex
。 Docusaurus 会调用这个创造器,并等待它返回真正的配置对象。
async function createConfig() {
// ES 模块需要用 `import()` 而不是 `require()` 导入,并且是异步导入的
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/kate[email protected]/dist/katex.min.css',
type: 'text/css',
integrity:
'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
crossorigin: 'anonymous',
},
],
};
}
module.exports = createConfig;