Version: 2.0.0-beta.15

数学公式

用法​

內嵌​

Write inline math equations by wrapping LaTeX equations between $: 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\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)$. 分区​ For equation block or display mode, use line breaks and $$:$$ I = \int_0^{2\pi} \sin(x)\,dx$\$
http://localhost:3000
$I = \int_0^{2\pi} \sin(x)\,dx$

配置​

To enable KaTeX, you need to install remark-math and rehype-katex plugins.

npm install
caution

Use the exact same versions. The latest versions are incompatible with Docusaurus 2.

Import the plugins in docusaurus.config.js:

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

Add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

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

Include the KaTeX CSS in your config under stylesheets:

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

Overall the changes look like:

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

Only use the latest version if you actually need the bleeding-edge features of $\KaTeX$. 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.

docusaurus.config.js
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:

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/[email protected]/dist/katex.min.css',
type: 'text/css',
integrity:
'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
crossorigin: 'anonymous',
},
],
};
}

module.exports = createConfig;