\begin{comparison}
Comment afficher des équations LaTeX
sur le Web
API côté serveur, JavaScript côté client ou approche hybride ? Ce guide compare toutes les grandes méthodes pour afficher des équations LaTeX sous forme d'images ou de HTML, afin que vous choisissiez la bonne pour votre site, votre documentation ou votre application.
\section{aperçu des méthodes}
Trois approches pour afficher des équations LaTeX
Tout moteur de rendu d'équations LaTeX relève de l'une de ces trois catégories. Le bon choix dépend de l'endroit où l'équation sera affichée, du caractère statique ou dynamique du contenu et de l'importance que vous accordez à la fidélité typographique.
Rendu côté serveur
Un appel d'API renvoie une image (PNG, SVG ou PDF)
Vous envoyez votre code source LaTeX à une API REST et recevez une image dans la réponse. L'équation est compilée sur le serveur avec un vrai moteur TeX : le résultat est donc identique à celui d'une installation TeX Live locale. Le résultat est une ressource statique que vous pouvez intégrer partout : pages HTML, e-mails, fichiers Markdown, messages Slack ou diapositives de présentation.
Exemples : FormaTeX API, CodeCogs, QuickLaTeX, i2svg
Avantages
- Un résultat au pixel près issu d'un vrai moteur TeX
- Aucun JavaScript côté client requis
- Fonctionne dans les e-mails, les PDF, le Markdown et tout HTML
- Rendu cohérent sur tous les navigateurs et appareils
Compromis
- Nécessite une requête réseau par équation
- La latence dépend du temps de réponse du serveur
- Une clé API peut être nécessaire en production
Rendu côté client
Une bibliothèque JavaScript affiche les équations dans le navigateur
Une bibliothèque JavaScript (MathJax ou KaTeX) analyse directement la syntaxe LaTeX dans le navigateur et la convertit en nœuds HTML/CSS ou SVG dans le DOM. Aucun aller-retour avec le serveur n'est nécessaire après le chargement initial de la page. Cette approche convient bien aux applications interactives où les équations sont saisies en temps réel par l'utilisateur, comme les éditeurs de forums, les interfaces de carnets ou les outils d'aperçu en direct.
Exemples : MathJax, KaTeX
Avantages
- Aucune dépendance au serveur une fois le bundle JS chargé
- Rendu instantané des équations saisies par l'utilisateur
- Adapté aux interfaces d'édition interactives ou en temps réel
Compromis
- Ajoute du poids au bundle JavaScript (KaTeX ~28 Ko min+gz, MathJax ~100 Ko+)
- Ne couvre pas tout le langage LaTeX (mode mathématique uniquement)
- Le rendu peut varier légèrement d'un navigateur à l'autre
- Inutilisable dans les e-mails ou les contextes non HTML
Approche hybride
Le serveur effectue le rendu, le client affiche des images mises en cache
Les équations sont compilées côté serveur au moment du build ou à la première requête, puis mises en cache sous forme d'images statiques et servies depuis un CDN. Le client charge des images pré-générées, sans JavaScript ni compilation à l'exécution. Cela combine la qualité typographique du rendu côté serveur et les performances des ressources statiques. C'est l'approche recommandée pour les sites de documentation, les blogs et toute page dont les équations ne changent pas après la publication.
Exemples : API FormaTeX + cache CDN, sites statiques pré-générés
Avantages
- Le meilleur des deux mondes : une sortie de qualité TeX sans JavaScript côté client
- Les équations sont mises en cache et servies à la vitesse d'un CDN
- Favorable au SEO grâce au texte alternatif des images
Compromis
- Nécessite une étape de compilation au moment du build ou à la première requête
- Ne convient pas aux équations saisies par les utilisateurs à l'exécution
\section{server-side}
Moteurs de rendu côté serveur comparés
Quatre services qui compilent du LaTeX sur un serveur et renvoient une image ou un vecteur. Chacun a un périmètre différent : certains gèrent uniquement le mode mathématique, tandis que d'autres exécutent une installation TeX Live complète capable de compiler des documents entiers.
API FormaTeX
Compilation TeX Live complète via une API REST. Prend en charge les documents LaTeX complets (pas seulement les équations), trois moteurs (pdfLaTeX, XeLaTeX, LuaLaTeX) et une sortie en PNG, SVG ou PDF. Conçue pour les développeurs qui ont besoin d'un accès programmatique à un vrai compilateur TeX sans gérer d'infrastructure TeX Live.
CodeCogs
L'un des plus anciens services de conversion LaTeX en image. Vous construisez une URL avec votre expression mathématique LaTeX comme paramètre de requête, et le serveur renvoie un PNG ou un GIF. Simple à utiliser pour des équations isolées dans du Markdown ou du HTML. Limité au mode mathématique, sans prise en charge des paquets personnalisés ni de la compilation de documents.
QuickLaTeX
Un service web gratuit principalement utilisé comme extension WordPress. Il accepte du LaTeX via un point de terminaison POST et renvoie des images PNG. Il prend en charge un sous-ensemble limité de paquets LaTeX au-delà des mathématiques de base. Convient aux blogueurs et aux utilisateurs de WordPress, mais ne dispose pas d'une API REST documentée pour l'intégration programmatique.
i2svg
Un service léger qui convertit des expressions mathématiques LaTeX en SVG via des paramètres d'URL. La sortie SVG s'adapte à toutes les tailles, ce qui est utile pour les sites web adaptatifs. En revanche, il ne gère que le mode mathématique, n'a pas d'API REST et ne prend en charge ni les paquets personnalisés ni la compilation de documents complets.
| Fonctionnalité | FormaTeX | CodeCogs | QuickLaTeX | i2svg |
|---|---|---|---|---|
| Formats de sortie | PNG, SVG, PDF | PNG, GIF, SVG | PNG | SVG uniquement |
| Prise en charge complète de LaTeX | TeX Live complet | Mode mathématique uniquement | Paquets limités | Mode mathématique uniquement |
| Paquets personnalisés | Tous les paquets CTAN | Non | Sous-ensemble limité | Non |
| Plusieurs moteurs | pdfLaTeX, XeLaTeX, LuaLaTeX | pdfLaTeX uniquement | pdfLaTeX uniquement | Aucun (basé sur JS) |
| API REST | Oui, documentée | Uniquement via URL | Point de terminaison POST | Uniquement via URL |
| Contrôle du DPI / de la résolution | Configurable | Préréglages limités | Configurable | Vectoriel (infini) |
| Limites de débit (offre gratuite) | 15 compilations/mois | Non précisé / limité | Non précisé | Illimité (auto-hébergé) |
| Offres d'API commerciales | À partir de $4.99/mois | Tarification sur mesure | Gratuit uniquement | Open source |
= fort = correct = non pris en charge
\section{client-side}
Moteurs de rendu côté client
MathJax et KaTeX sont des bibliothèques JavaScript qui affichent la notation mathématique LaTeX directement dans le navigateur. Elles ne compilent pas de documents LaTeX complets : elles ne gèrent que le mode mathématique. Pour de nombreuses applications web, c'est exactement ce qu'il vous faut.
MathJax
Le moteur de rendu mathématique côté client le plus répandu. MathJax prend en charge un très large sous-ensemble des commandes mathématiques LaTeX, y compris les extensions AMS, et peut produire du HTML/CSS, du SVG ou du MathML. C'est le moteur de rendu mathématique par défaut de nombreux wikis, plateformes LMS et sites scientifiques.
Idéal pour
- Sites web nécessitant une large couverture des mathématiques LaTeX
- Plateformes utilisant déjà MathJax (coût de migration nul)
- Accessibilité : la sortie MathML fonctionne avec les lecteurs d'écran
- Équations complexes, y compris les environnements multilignes
À surveiller
- Taille du bundle : ~100 Ko+ minifié et compressé avec gzip
- Délai de rendu initial sur les grandes pages comportant de nombreuses équations
- La configuration peut être complexe pour les cas avancés
KaTeX
Une alternative rapide et légère à MathJax, créée par Khan Academy. KaTeX effectue un rendu synchrone : les équations apparaissent dans la même image de rendu que le reste de la page. Il prend en charge un sous-ensemble plus restreint des mathématiques LaTeX que MathJax, mais couvre la grande majorité des cas d'usage courants.
Idéal pour
- Applications où la performance est critique (rendu 10 fois plus rapide que MathJax)
- Éditeurs avec aperçu en direct où la latence de saisie compte
- Rendu côté serveur avec Node.js (KaTeX peut s'exécuter sur le serveur)
- Taille de bundle réduite (~28 Ko minifié et compressé avec gzip)
À surveiller
- Prise en charge de LaTeX plus restreinte : certains environnements AMS sont absents
- Pas de sortie MathML (accessibilité limitée)
- Les macros personnalisées nécessitent une configuration supplémentaire
Quand utiliser le rendu côté client plutôt qu'une API
Les moteurs de rendu côté client sont le bon choix lorsque les équations sont saisies par les utilisateurs à l'exécution, lorsque vous avez besoin d'un aperçu instantané pendant l'édition ou lorsque vous voulez éviter totalement les coûts de serveur. Ils fonctionnent bien dans les applications monopages, les manuels interactifs et toute interface où l'utilisateur saisit du LaTeX et s'attend à voir immédiatement le résultat.
En revanche, si vos équations sont statiques (connues au moment du build), si vous avez besoin d'une sortie au-delà du mode mathématique (documents complets, paquets personnalisés, diagrammes TikZ) ou si vous devez intégrer des équations dans des contextes non HTML (e-mails, Slack, PDF), un moteur de rendu côté serveur est la seule option. L' outil FormaTeX de conversion d'équations en images gère tous ces cas.
\section{matrice de décision}
Quelle approche vous convient ?
La réponse dépend de votre cas d'usage. Voici un aide-mémoire pour les scénarios les plus courants.
Blog ou site de documentation avec des équations rédigées à l'avance
Côté serveur (hybride avec cache CDN)
Les équations sont connues au moment du build. Compilez une fois, mettez en cache pour toujours. Aucun JavaScript côté client. Meilleures performances de page et meilleur SEO.
Application web avec mathématiques saisies par l'utilisateur (par ex. forum, outil de devoirs)
Côté client (KaTeX pour la vitesse, MathJax pour la couverture)
Les utilisateurs saisissent les équations en temps réel. Le rendu côté client donne un retour instantané sans attendre un aller-retour avec le serveur.
Newsletters par e-mail ou bots Slack/Discord
Côté serveur (sortie en image)
Les clients de messagerie suppriment entièrement le JavaScript. Il vous faut une image statique. Un moteur de rendu côté serveur comme l'API FormaTeX renvoie un PNG que vous pouvez intégrer directement dans le corps de l'e-mail.
Génération de PDF académiques via un pipeline CI/CD
API côté serveur (FormaTeX ou TeX Live auto-hébergé)
La compilation TeX Live complète produit des PDF de qualité publication. L'API FormaTeX s'en charge avec une seule requête POST, sans image Docker TeX Live.
Diapositives de présentation (reveal.js, Google Slides)
Côté serveur (SVG ou PNG haute densité)
Les équations SVG s'adaptent parfaitement à toutes les résolutions. Effectuez le rendu côté serveur, téléchargez l'image et insérez-la dans votre présentation.
Carnet de type Jupyter dans le navigateur
Côté client (KaTeX ou MathJax)
Les carnets ont besoin d'un rendu instantané pendant la saisie. KaTeX est plus rapide pour les mathématiques courantes ; MathJax couvre davantage de commandes TeX peu courantes.
Règle générale
Si vos équations sont connues à l'avance (documentation, articles de blog, rapports générés), utilisez un moteur de rendu côté serveur et mettez la sortie en cache. Si vos équations sont saisies par les utilisateurs à l'exécution (forums, carnets, éditeurs en direct), utilisez une bibliothèque côté client . Si vous avez besoin des deux, l'approche hybride offre des images de qualité TeX pour le contenu statique et un rendu instantané côté client pour les fonctionnalités interactives.
Affichez votre première équation
L'API FormaTeX compile n'importe quel code source LaTeX en PNG, SVG ou PDF. L'offre gratuite comprend 15 compilations par mois. Aucune carte bancaire requise.
\section{guides associés}