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@6 rehype-katex@7
attention

Make sure to use remark-math 6 and rehype-katex 7 for Docusaurus v3 (using MDX v3). We can't guarantee other versions will work.

Ces 2 plugins sont maintenant uniquement disponibles en tant que ES Modules. Pour simplifier l'utilisation, il est recommandé d'utiliser un fichier de configuration ES Modules :

ES module docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
};
Utilisation d'un fichier de config 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.js
module.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 :

stylesheets: [
  {
    href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/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
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/katex@0.13.24/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
export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};