Aller au contenu principal
Version : 2.x

É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@3 rehype-katex@5 hast-util-is-element@1.1.0
attention

Utilisez exactement les mêmes versions. Les dernières versions sont incompatibles avec Docusaurus 2.

Importez les plugins dans docusaurus.config.js :

const math = require('remark-math');
const katex = require('rehype-katex');

Ajoutez-les aux options de votre plugin de contenu ou de votre preset (généralement les options de docs de @docusaurus/preset-classic) :

remarkPlugins: [math],
rehypePlugins: [katex],

Incluez 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
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/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. Si vous préférez héberger vous-même le fichier katex.min.css (avec les polices KaTeX requises), vous pouvez télécharger la dernière version depuis [KaTeX GitHub releases] (https://github.com/KaTeX/KaTeX/releases), extraire et copier katex.min.css et le répertoire fonts (seuls les types de polices .woff2 devraient suffire) dans le répertoire static de votre site, et dans docusaurus.config.js, remplacez le href de la feuille de style de l'URL du CDN par votre chemin local (disons, /katex/katex.min.css).

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

N'utilisez la dernière version que si vous avez réellement besoin des fonctionnalités de KaTeX\KaTeX. La plupart des utilisateurs devraient trouver que les anciennes versions fonctionnent tout aussi bien.

Les dernières versions de rehype-katex (à partir de la v6.0.0) sont passées aux ES Modules, un nouveau système de modules de JavaScript, que Docusaurus ne supporte pas encore officiellement. Cependant, il est possible d'importer dynamiquement rehype-katex en utilisant un créateur de configuration asynchrone. Docusaurus appellera cette fonction de créateur et attendra qu'elle retourne l'objet de configuration.

docusaurus.config.js
async function createConfig() {
  // Les modules ES sont importés avec `import()` au lieu de `require()`, et sont importés de manière asynchrone
  const katex = (await import('rehype-katex')).default;
  return {
    // ...
  };
}

Dans ce cas, les modifications de la configuration globale ressembleront à ce qui suit :

docusaurus.config.js
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/katex@0.15.2/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;