Vous savez ce qui m’a plu en découvrant aujourd’hui MathJax 4.0 ?
Ce n’est pas tant les nouvelles fonctionnalités (pourtant impressionnantes) que le chemin parcouru depuis 2009. Car il y a 15 ans, afficher une simple équation mathématique sur une page web relevait du parcours du combattant et aujourd’hui, avec MathJax c’est tout ce qu’il y a de plus trivial.
Alors pour ceux qui ne connaissent pas, MathJax c’est LE moteur JavaScript open-source qui permet d’afficher des équations mathématiques sur n’importe quel navigateur. Sans plugin, sans galère, juste du JS pur.
Et cette v4 règle enfin des problèmes qu’on traîne depuis des années. Prenez par exemple le retour à la ligne automatique… Jusqu’à présent, si vous aviez une équation trop longue, tant pis pour votre mise en page. Et bien avec la v4, MathJax gère maintenant le line-breaking intelligent, aussi bien pour les équations en ligne que pour celles en bloc.
Les performances ont aussi pris un coup de boost considérable grâce à l’équipe qui a déplacé la génération de la synthèse vocale dans des web workers séparés. Concrètement, ça veut dire que même sur des pages bourrées d’équations complexes, votre navigateur reste réactif. Fini les freezes quand vous chargez un document de 200 pages avec des maths partout.
Côté typographie, c’est également du très lourd puisque MathJax 4.0 introduit un nouveau système de fonts par défaut avec une couverture de caractères bien plus étendue. Vous pouvez maintenant choisir parmi plusieurs polices mathématiques selon vos besoins.
L’intégration HTML dans les expressions LaTeX et MathML, sont également très cool car ça permet d’inclure des éléments HTML directement dans vos formules mathématiques. Des liens cliquables dans une équation, des tooltips interactifs, des animations… Les possibilités sont énormes pour créer des contenus éducatifs vraiment engageants.
Pour l’utiliser, il vous suffit d’inclure l’appel vers ce JS dans votre page HTML :
<script id=“MathJax-script” async src=“https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js”></script>
Puis d’aller lire la documentation ici pour apprendre à l’utiliser.
Voici un exemple d’intégration :
<!DOCTYPE html>
you see this when javscript or css is not working correct