É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
$$
Configuration
Pour activer KaTeX, vous devez installer les plugins remark-math
et rehype-katex
.
- npm
- Yarn
- pnpm
npm install --save remark-math@5 rehype-katex@6
yarn add remark-math@5 rehype-katex@6
pnpm add remark-math@5 rehype-katex@6
Assurez-vous d'utiliser remark-math >= 5
et rehype-katex >= 6
pour Docusaurus v3 (en utilisant MDX v2).
Ces 2 plugins ne sont maintenant disponibles que sous la forme de paquets ESM, et vous devrez les importer dynamiquement.
Tout d'abord, transformez la configuration de votre site en une fonction de création de configuration asynchrone :
module.exports = async function createConfigAsync() {
return {
// config de votre site...
};
};
Il est maintenant possible d'importer les plugins dynamiquement et de les ajouter aux options de votre plugin de contenu ou de votre preset (habituellement les options des docs @docusaurus/preset-classic
) :
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],
Inclue le CSS de KaTeX dans votre configuration sous 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 :
module.exports = async function createConfigAsync() {
return {
title: 'Docusaurus',
tagline: 'Créez rapidement des sites web optimisés, concentrez-vous sur votre contenu',
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
path: 'docs',
remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).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',
},
],
};
};
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
).
module.exports = {
stylesheets: [
{
href: '/katex/katex.min.css',
type: 'text/css',
},
],
};