Aller au contenu principal
Version : Canary 🚧

É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)$.
http://localhost:3000

Soit f ⁣:[a,b]→Rf\colon[a,b] \to \R est une intégrale de Riemann. Soit F ⁣:[a,b]→RF\colon[a,b]\to\R est F(x)=∫axf(t) dtF(x)= \int_{a}^{x} f(t)\,dt. Alors FF est continue, et pour tout xx tel que ff est continue à xx, FF est différentiable à xx avec F′(x)=f(x)F'(x)=f(x).

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
$$
http://localhost:3000
I=∫02πsin⁡(x) dxI = \int_0^{2\pi} \sin(x)\,dx

Configuration​

Pour activer KaTeX, vous devez installer les plugins remark-math et rehype-katex.

npm install --save remark-math@5 rehype-katex@6
attention

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 :

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

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

docusaurus.config.js
module.exports = {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};