数学公式
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)$.
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
$$
Configuration
如需启用 KaTeX,你需要安装 remark-math
和 rehype-katex
两个插件。
- npm
- Yarn
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
caution
请使用上面安装命令中相同的版本号来安装插件。因为这两个插件的最新版本不兼容 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/katex@0.13.24/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/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
).
module.exports = {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};
Upgrading rehype-katex beyond recommended version
tip
Only use the latest version if you actually need the bleeding-edge features of . Most users should find the older versions work just as well.
The latest versions of rehype-katex
(starting from v6.0.0
) has moved to ES Modules, a new module system of JavaScript, which Docusaurus doesn't officially support yet. However, it is possible to import rehype-katex
dynamically, using an async config creator. Docusaurus will call this creator function and wait for it to return the config object.
async function createConfig() {
// ES Modules are imported with `import()` instead of `require()`, and are imported asynchronously
const katex = (await import('rehype-katex')).default;
return {
// ...
};
}
In this case, the overall configuration changes will look like:
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;