Équations mathématiques
Mathematical equations can be rendered using KaTeX.
Usage
Please read KaTeX documentation for more details.
Inline
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)$.
Soit est une intégrale de Riemann. Soit est . Alors est continue, et pour tout tel que est continue à , est différentiable à avec .
Blocks
For equation block or display mode, use line breaks and $$
:
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
Configuration
To enable KaTeX, you need to install remark-math
and rehype-katex
plugins.
- npm
- Yarn
- pnpm
npm install --save [email protected] [email protected] [email protected]
Utilisez exactement les mêmes versions. Les dernières versions sont incompatibles avec 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',
},
],
Dans l'ensemble, les changements sont les suivants :
const math = require('remark-math');
const katex = require('rehype-katex');
module.exports = {
title: 'Docusaurus',
tagline: 'Construire rapidement des sites Web optimisés, se concentrer sur votre contenu',
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',
},
],
};
Self-hosting KaTeX assets
Le chargement des feuilles de style, des polices et des bibliothèques JavaScript à partir de sources CDN est une bonne pratique pour les bibliothèques et les ressources populaires, car elle réduit la quantité de ressources que vous devez héberger. 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
N'utilisez la dernière version que si vous avez réellement besoin des fonctionnalités de . La plupart des utilisateurs devraient trouver que les anciennes versions fonctionnent tout aussi bien.
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 appellera cette fonction de créateur et attendra qu'elle retourne l'objet de configuration.
async function createConfig() {
// ES Modules are imported with `import()` instead of `require()`, and are imported asynchronously
const katex = (await import('rehype-katex')).default;
return {
// ...
};
}
Dans ce cas, les modifications de la configuration globale ressembleront à ce qui suit :
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;