MathJax

Doc officielle (en)

MathJax 3 est un complément Javascript pour la mise en forme des formules mathématiques sur les pages Web. Les formules sont écrites au choix au format AsciiMath, Tex/Latex ou MathML.

Inclure la source MathJax

Le plus simple pour accéder aux fonctionnalités de MathJax est d'inclure un lien depuis un CDN (Content Deliver Network). Il faut ajouter la balise suivante dans l'en-tête HTML (head):


        <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    

Cette source CDN utlise une configuration pour reconnaître les formules écrites en TeX et MathML, et génère une sortie fondée sur HTML et CSS (d'autres configurations sont possibles).

Configuration de MathJax

Tout repose sur l'objet windows.MathJax.

La doc officielle propose 2 pages pour définir sa configuration ici et .

Pour ma part, j'opterais pour l'utilisation d'un fichier annexe mathjax_config_load.js contenant la configuration désirée et l'appel à la bibliothèque MathJax.


                // Définir ci-dessous la configuration spécifique désirée
                window.MathJax = {
                    loader: {load: ['[tex]/mhchem', '[tex]/physics', '[tex]/ams']},
                    tex: {packages: {'[+]': ['mhchem', 'physics', 'ams']}, }
                  };
                  
                  (function () {
                    var script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'; // choisir ici la configuration par défaut à charger
                    script.async = true;
                    document.head.appendChild(script);
                  })();
            

Et il suffit alors de faire un lien dans l'en-tête HTML vers ce fichier JS depuis le fichier HTML :


                <script src="mathjax_config_load.js" async></script>
            

Évidemment, dans ce cas, on n'inclut pas le lien indiqué dans la partie précédente !

Exemples

La configuration de base permet d'inclure des formules Latex inline entre les balises \\( et \\), ou bien des formules block entre les balises \$$ et \$$.

Voici une formule Latex inline \( \dfrac{u_v}{v} = \sqrt{\left(\dfrac{u_d}{d}\right)^2 + \left(\dfrac{u_t}{t}\right)^2} \) et maintenant une blok : $$ T = 2\pi\sqrt{\dfrac{\ell}{g}} $$ et même de la chimie \( \ce{CH3CO2H + H2O <--> CH2CO2- + H3O+} \).

Le code HTML du paragraphe ci-dessus est simplement :


                <p>Voici une formule Latex inline \( a = \sqrt{\left(\dfrac{u_X}{X}\right)^2 + \left(\dfrac{u_Y}{Y}\right)^2} \) et
                    maintenant une blok : $$ T = 2\pi\sqrt{\dfrac{\ell}{g}} $$ 
                    et même de la chimie \( \ce{CH3CO2H + H2O &lt;--&gt; CH2CO2- + H3O+} \).</p>
            

Complément : configuration pour Tex/Latex et la physique/chimie

Configuration globale de la prise en charge de Tex et extensions et les extensions utiles physique et chimie.

Et voici la liste des commandes Tex utilisables.