Équations mathématiques
Les équations mathématiques peuvent être rendues en utilisant KaTeX.
Utilisation
Veuillez lire la documentation de KaTeX pour plus de détails.
En ligne
Écrivez des équations mathématiques en ligne en enveloppant les équations LaTeX entre $
:
Soit $f\colon[a,b]\to\R$ est une intégrale de Riemann. Soit $F\colon[a,b]\to\R$ est
$F(x)=\int_{a}^{x} f(t)\,dt$. Alors $F$ est continue, et pour tout $x$ tel que
$f$ est continue à $x$, $F$ est différentiable à $x$ avec $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 .
Blocs
Pour le bloc d'équation ou le mode d'affichage, utilisez les sauts de ligne et le $$
:
$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
Activation des équations mathématiques
Activer KaTeX :
-
Installez les plugins
remark-math
etrehype-katex
:- npm
- Yarn
- pnpm
npm install --save remark-math@6 rehype-katex@7
yarn add remark-math@6 rehype-katex@7
pnpm add remark-math@6 rehype-katex@7
attentionAssurez-vous d'utiliser
remark-math 6
etrehype-katex 7
pour Docusaurus v3 (en utilisant MDX v3). Nous ne pouvons pas garantir que d'autres versions fonctionneront. -
Ces 2 plugins sont uniquement disponibles en tant que ES Modules. Nous vous recommandons d'utiliser un fichier de configuration ES Modules :
ES module docusaurus.config.jsimport remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
},
},
],
],
};Vous utilisez un fichier de configuration CommonJS ?
Si vous décidez d'utiliser un fichier de config CommonJS, il est possible de charger ces plugins de module ES grâce à des importations dynamiques et une fonction créateur de config asynchrone :
CommonJS module docusaurus.config.jsmodule.exports = async function createConfigAsync() {
return {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],
},
},
],
],
};
}; -
Inclue le CSS de KaTeX dans votre configuration sous
stylesheets
:export default {
//...
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',
},
],
};
Voir un exemple de fichier de configuration
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
export default {
title: 'Docusaurus',
tagline: 'Construire rapidement des sites Web optimisés, se concentrer sur votre contenu',
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
},
},
],
],
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',
},
],
};
Auto-hébergement des ressources KaTeX
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. Dans le cas où vous préférez héberger vous-même le katex.min.css
(avec les polices KaTeX requises), vous pouvez télécharger la dernière version depuis KaTeX GitHub releases, extraire et copier katex.min.css
et le épertoire fonts
(seules les types de police .woff2
devraient suffire) dans le répertoire static
de votre site, et dans docusaurus.config.js
, remplacez la feuille de style href
de l'URL CDN vers votre chemin local (par exemple, /katex/katex.min.css
).
export default {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};