Comment ajouter des équations LaTeX dans les articles du blog Astro

Ce document montre comment utiliser les équations LaTeX dans vos fichiers Markdown pour Point Rouge. LaTeX est un puissant système de composition souvent utilisé pour les documents mathématiques et scientifiques.

Free Close-up of complex equations on a chalkboard, showcasing chemistry and math symbols. Stock Photo — Photo by Vitaly Gariev

Table des matières

Instructions

Dans cette section, vous trouverez des instructions sur la façon d’ajouter la prise en charge de LaTeX dans vos fichiers Markdown pour Point Rouge.

Installez les plugins de remarques et de rehype nécessaires en exécutant :
```
pnpm install rehype-katex remark-math katex
```

Mettez à jour la configuration Astro pour utiliser ces plugins :

// ...
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default defineConfig({
  // ...
  markdown: {
    remarkPlugins: [
      remarkMath,
      remarkToc,
      [remarkCollapse, { test: "Table of contents" }],
    ],
    rehypePlugins: [rehypeKatex],
    shikiConfig: {
      // For more themes, visit https://shiki.style/themes
      themes: { light: "min-light", dark: "night-owl" },
      wrap: false,
    },
  },
  // ...
});astro.config.ts

Importez KaTeX CSS dans le fichier de mise en page principal

---
import { SITE } from "@config";

// astro code
---

<!doctype html>
<!-- Other elements  -->
<meta property="og:image" content={socialImageURL} />

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css"
/>

<body>
  <slot />
</body>src/layouts/Layout.astro

Comme dernière étape, ajoutez une couleur de texte pour katex dans typography.css.

@plugin "@tailwindcss/typography";

@layer base {
  /* other classes */

  /* Katex text color */
  .prose .katex-display {
    @apply text-foreground;
  }

  /* ===== Code Blocks & Syntax Highlighting ===== */
  /* other classes */
}src/styles/typography.css

Et voilà, cette configuration vous permet d’écrire des équations LaTeX dans vos fichiers Markdown, qui seront restituées correctement lors de la construction du site. Une fois que vous l’avez fait, le reste du document apparaîtra correctement rendu.

Équations en ligne

Les équations en ligne sont écrites entre des signes dollar simples $...$ . Voici quelques exemples :

La célèbre formule d’équivalence masse-énergie : $E = mc^2$
La formule quadratique : $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
L’identité d’Euler : $e^{i\pi} + 1 = 0$

Bloquer les équations

Pour des équations plus complexes ou lorsque vous souhaitez que l’équation soit affichée sur sa propre ligne, utilisez le double signe dollar $$...$$:

L’intégrale gaussienne :

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

La définition de la fonction zêta de Riemann :

$$ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} $$

Les équations de Maxwell sous forme différentielle :

$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right)
\end{aligned}
$$

Utiliser des symboles mathématiques

LaTeX propose une large gamme de symboles mathématiques :

Lettres grecques : $\alpha$ , $\beta$ , $\gamma$ , $\delta$ , $\epsilon$ , $\pi$
Opérateurs : $\sum$ , $\prod$ , $\int$ , $\partial$ , $\nabla$
Relations : $\leq$ , $\geq$ , $\approx$ , $\sim$ , $\propto$
Symboles logiques : $\forall$ , $\exists$ , $\neg$ , $\wedge$ , $\vee$