🧮 Intégration LaTeX avec HTML
1. Méthode MathJax (Recommandée)
Installation
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
Utilisation
Formule inline : L'équation du second degré $ax^2 + bx + c = 0$ a pour solutions $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$
Formule en bloc : $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
Matrice : $$A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
Limite : $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
Somme : $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
Formule en bloc : $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
Matrice : $$A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
Limite : $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
Somme : $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
✅ Avantages
- Rendu de haute qualité
- Support complet de LaTeX
- Mise à jour automatique
- Compatible tous navigateurs
⚠️ Inconvénients
- Temps de chargement
- Taille du fichier
- Dépendance externe
2. Méthode KaTeX (Plus rapide)
Installation
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min.js"></script>
Formule KaTeX: \(E = mc^2\)
\[f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} d\xi\]
3. Comparaison des solutions
| Critère | MathJax | KaTeX |
|---|---|---|
| Vitesse | Plus lent | Plus rapide |
| Support LaTeX | Complet | Limité |
| Taille | ~1.2MB | ~150KB |
| Qualité rendu | Excellent | Très bon |
🚀 Démo Interactive
Testez vos formules LaTeX :
$$E = mc^2$$
4. Formules complexes - Exemples avancés
Équation de Schrödinger :
$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$Transformée de Fourier :
$$\mathcal{F}\{f(t)\} = \int_{-\infty}^{\infty} f(t) e^{-2\pi i \xi t} dt$$Équations de Maxwell :
$$\begin{align} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{align}$$Nombres complexes :
$$z = a + bi \quad \text{où} \quad |z| = \sqrt{a^2 + b^2}$$ $$e^{i\theta} = \cos\theta + i\sin\theta$$5. Code source complet
<!DOCTYPE html>
<html>
<head>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']]
}
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
</head>
<body>
<h1>Ma page avec LaTeX</h1>
<p>Formule inline : $E = mc^2$</p>
<p>Formule centrée :</p>
$$\int_0^1 x^2 dx = \frac{1}{3}$$
</body>
</html>