MathJax - Tex : guide pratique, aide-mémoire

Plus efficace qu’un long discours, des exemples d’équations Tex dans des pages HTML avec la librairie MathJax.

	Mode bloc	Mode "Inline"
Écriture du code Tex	`<div> $$ Tex code $$ </div> <div> \[ Tex code \] </div>`	`<p> $ Tex code $ </p> <p> ## Tex code ## </p> <p> $ Tex code $ </p>`

Chargement de MathJax v2

<head>
 <script>
    window.MathJax = {
      tex2jax : {
        inlineMath : [ ['##','##'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        processClass: 'cmath|dmath'
      },
      displayAlign: "left"
    };
 </script>
 <script async="true" 
            src="[path]/MathJax.js?config=TeX-AMS_CHTML">
 </script>
</head>

displayAlign est défini à left pour remplacer le centrage par défaut des équations en mode bloc.

MathJax 3 est disponible (refonte du moteur et améliorations des performances), pour migrer : Configuration MathJax v2 → v3 - Outil de conversion en ligne

Chargement de MathJax v3

<head>
 <script>
    window.MathJax = {
      tex: {
        inlineMath: [ ['##','##'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true,
        packages: {'[+]': ['noerrors']}
      },
      chtml: {
        displayAlign: "left"
      },
      options: {
        processHtmlClass: 'cmath|dmath',
        ignoreHtmlClass: 'tex2jax_ignore'
      },
      loader: {
        load: ['input/tex','output/chtml','[tex]/noerrors','ui/lazy']
      }
    };
 </script>
 <script async="true" src="[path]/startup.js"></script>
</head>

La syntaxe AsciiMath 2 est disponible à partir de la version 3.1.3 (Avril 2021), pour utiliser asciimath :

      loader: { load: […,'input/asciimath'] }

Le mode "Lazy", une nouveauté formidable pour les performances, est disponible à partir de la version 3.2.0 (Juin 2021), les équations sont rendues uniquement lorsque la fenêtre d’affichage les rencontre :

      loader: { load: […,'ui/lazy'] }

Matrices

$$ \begin{pmatrix} 1 & 2 \\ 3 & 4 \\ \end{pmatrix} $$

$$
   \begin{pmatrix}
     1 & 2 \\
     3 & 4 \\
   \end{pmatrix}
$$

$$ \begin{bmatrix} 1 & 2 \\ 3 & 4 \\ \end{bmatrix} $$

$$
   \begin{bmatrix}
     1 & 2 \\
     3 & 4 \\
   \end{bmatrix}
$$

$$ \begin{Bmatrix} 1 & 2 \\ 3 & 4 \\ \end{Bmatrix} $$

$$
   \begin{Bmatrix}
     1 & 2 \\
     3 & 4 \\
   \end{Bmatrix}
$$

$$ \begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix} $$

$$
   \begin{vmatrix}
     1 & 2 \\
     3 & 4 \\
   \end{vmatrix}
$$

$$ \begin{Vmatrix} 1 & 2 \\ 3 & 4 \\ \end{Vmatrix} $$

$$
   \begin{Vmatrix}
     1 & 2 \\
     3 & 4 \\
   \end{Vmatrix}
$$

Omettre des entrées :

$$ \begin{pmatrix} 1 & a_1 & \cdots & a_n \\ 1 & b_1 & \cdots & b_n \\ \vdots & \vdots & \ddots & \vdots \\ 1 & z_1 & \cdots & z_n \\ \end{pmatrix} $$

$$
   \begin{pmatrix}
     1      & a_1    & \cdots & a_n    \\
     1      & b_1    & \cdots & b_n    \\
     \vdots & \vdots & \ddots & \vdots \\
     1      & z_1    & \cdots & z_n    \\
   \end{pmatrix}
$$

Insérer un sépareur horizontal : \hline

$$ \begin{vmatrix} 1 & 2 \\ \hline 3 & 4 \\ \end{vmatrix} $$

$$
   \begin{vmatrix}
     1 & 2 \\
   \hline
     3 & 4 \\
   \end{vmatrix}
$$

Insérer un séparateur vertical : arrays

$$ \left[ \begin{array}{cc|c} 1 & 2 & 3 \\ 4 & 5 & 6 \\ \end{array} \right] $$

$$ \left[
\begin{array}{cc|c}
  1 & 2 & 3 \\
  4 & 5 & 6 \\
\end{array}
\right] $$

Matrices inline (smallmatrix) :

Dans la matrice ##\bigl(\begin{smallmatrix} a & b \\ c & d \end{smallmatrix}\bigr)##, pas de chiffres.

Dans la matrice
$\bigl(\begin{smallmatrix} a & b \\ c & d \end{smallmatrix}\bigr)$
, pas de chiffres.

Fractions

frac :

$$ y = \frac{x+1}{x+2} $$

$$ y = \frac{x+1}{x+2} $$

On préférera \over quand les numérateurs et dénominateurs sont complexes et pour la lisibilité.

$$ y = {x+1 \over x+2} $$

dfrac (displaystyle) - Fractions qui ne s’ajustent pas à la ligne mais au style global (éléments ouvrants, fermants…) :

$$ \begin{pmatrix} \dfrac{1}{2} & 0 \\ 0 & \dfrac{1}{2} \\ \end{pmatrix} $$

$$
  \begin{pmatrix}
    \dfrac{1}{2} & 0            \\
    0            & \dfrac{1}{2} \\
  \end{pmatrix}
$$

cfrac - Fractions continues :

$$ x = \cfrac{1}{\sqrt{2}+ \cfrac{1}{\sqrt{2}+ \cfrac{1}{\sqrt{2}+\dotsb} } } $$

$$
x = \cfrac{1}{\sqrt{2}+
      \cfrac{1}{\sqrt{2}+
        \cfrac{1}{\sqrt{2}+\dotsb}
      }
    }
$$

Fonctions par morceaux

$$ f(n) = \begin{cases} \dfrac{n+1}{2} & \text{si n est pair} \\ \\ \dfrac{n}{2} & \text{si n est impair} \end{cases} \qquad \forall n \in \mathbb N $$

$$  f(n) =
\begin{cases}
  \dfrac{n+1}{2} & \text{si n est pair} \\ \\
  \dfrac{n}{2}   & \text{si n est impair}
\end{cases}
\qquad \forall n \in \mathbb N     
$$

Tableaux (arrays)

$$ \begin{array}{c|lcr} n & \text{Left} & \text{Center} & \text{Right} \\ \hline 1 & 1 & 1 & 1 \\ 2 & 10 & 100 & 10 \\ 3 & 100 & 1000 & 100 \end{array} $$

$$
\begin{array}{c|lcr}
  n & \text{Left} & \text{Center} & \text{Right} \\
  \hline
  1   & 1      & 1     & 1     \\
  2   & 10     & 100   & 10    \\
  3   & 100    & 1000  & 100
\end{array}
$$

Centrer les équations sur le signe =

$$ \begin{align*} f(x) &= \frac{x+1}{x-2} \\ f'(x) &= \frac{(x-2) - (x+1)}{(x-2)^2} \\ &= - \frac{3}{x^2 - 4x + 4} \end{align*} $$

$$
\begin{align}
  f(x)   &= \frac{x+1}{x-2} \\ 
  f'(x)  &= \frac{(x-2) - (x+1)}{(x-2)^2} \\ 
         &= - \frac{3}{x^2 - 4x + 4}
\end{align}
$$

Systèmes d’équations :

$$ \left \{ \begin{align*} 2x + y − 2z &= 3 \\ x − y − z &= 0 \\ x + y + 3z &= 12 \end{align*} \right. $$

$$
\left \{
  \begin{align}
     2x	+	y	−	2z  &=	3   \\
     x	−	y	−	z    &=	0   \\
     x	+	y	+	3z   &=	12
  \end{align}  
\right.
$$

Numéroter les équations (tag)

$$ \begin{align*} \cos 2\theta &= \cos^2 \theta - \sin^2 \theta \tag{2} \\ 1 &= \cos^2 \theta + \sin^2 \theta \tag{3} \\ \end{align*} $$

$$
\begin{align}
  \cos 2\theta  &= \cos^2 \theta - \sin^2 \theta  \tag{2}   \\ 

  1             &= \cos^2 \theta + \sin^2 \theta  \tag{3}   \\
\end{align}
$$

Signets (label, ref)

$$ \begin{align*} \cos 2x &= \cos^2x - \sin^2x \tag{4} \label{cos2x} \\ 1 &= \cos^2x + \sin^2x \tag{5} \label{5} \\ \end{align*} $$ À partir des formules $ \ref{cos2x} $ et $ \ref{5} $, on en déduit : $$ \begin{align*} \cos 2x &= \cos^2x + \sin^2x - \sin^2x - \sin^2x \\ \\ &= 1 - 2\sin^2x \end{align*} $$

$$
\begin{align}
  \cos 2x  &= \cos^2x - \sin^2x  \tag{4} \label{cos2x} \\ 

  1        &= \cos^2x + \sin^2x  \tag{5} \label{5}     \\
\end{align}
$$
À partir des formules $\ref{cos2x}$ et $\ref{5}$, on en déduit :
$$
\begin{align}
  \cos 2x &= \cos^2x + \sin^2x - \sin^2x - \sin^2x     \\ \\
          &= 1 - 2\sin^2x
\end{align}  
$$

Encadrer des équations (bbox)

$$ \bbox[8px,border:2px solid red] { e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n } $$

$$ \bbox[8px,border:2px solid red]
{
   e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
}
$$

$$ \bbox[#FFA,8px,border:2px solid red] { e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n } $$

$$ \bbox[#FFA,8px,border:2px solid red]
{
   e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
}
$$

Styles CSS (class)

La syntaxe \bbox pour appliquer du style nécessite de coder en dur les propriétés. Avec la syntaxe \class, une feuille de style peut être appliquée, plus simple en maintenance :

$$ \class{cmjx-highlight} { e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n } $$

$$ \class{cmjx-highlight}
{
   e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
}
$$

.cmjx-highlight { border: 2px solid #DD4A68;
                  padding: 8px; margin-right: 4px; }

Un autre exemple qui ne concerne pas l’encadrement des équations :

$$ \begin{align*} ax^2 + bx + c &= 0 \\ x &= \frac{-b \pm \sqrt{\Delta}}{2a} \class{cmjx-note} { \text{rem : } \Delta=b^2-4ac > 0 } \end{align*} $$

$$
    ax^2 + bx + c = 0 \\

    x = \frac{-b \pm \sqrt{\Delta}}{2a}
    \class{cmjx-note} { \text{rem : } \Delta=b^2-4ac > 0 }
$$

.cmjx-note {
  transform: translate(100px);
  font-size: 0.8em;
  color: #DD4A68;
}

displaystyle, textstyle

Une intégrale ##\int_{a}^{b} x^2 \,dx## dans du texte

Une intégrale $ int_{a}^{b} x^2 \,dx $ dans du texte

Une intégrale ##\displaystyle{ \int_{a}^{b} x^2 \,dx }## dans du texte avec \displaystyle

Une intégrale $ \displaystyle{ int_{a}^{b} x^2 \,dx } $ dans du texte
avec \displaystyle

Une somme dans un bloc : $$ \sum_{n=1}^\infty \frac{1}{n^2} $$

$$ \sum_{n=1}^\infty \frac{1}{n^2} $$

Une somme dans un bloc en mode texte avec \textstyle : $$ \textstyle{ \sum_{n=1}^\infty \frac{1}{n^2} } $$

$$ \textstyle{ \sum_{n=1}^\infty \frac{1}{n^2} } $$

Dimensionnement

Dimensionner les éléments ouvrant et fermant (crochets, parentheses, etc.)

$$ ( \sqrt{ \frac{x}{y} } ) $$

$$ ( \sqrt{ \frac{x}{y} } ) $$

$$ \left( \sqrt{ \frac{x}{y} } \right) $$

$$ \left( \sqrt{ \frac{x}{y} } \right) $$

$$ \Biggl( \biggl( \Bigl( \bigl( ( x^2 ) \bigr) \Bigr) \biggr) \Biggr) $$

$$ \Biggl( \biggl( \Bigl( \bigl( ( x^2 ) \bigr) \Bigr) \biggr) \Biggr) $$

Dimensionner les séparateurs (mid, middle)

$$ \{x \mid x^2 \} $$

$$ \{x \mid x^2 \} $$

$$ \left\{\dfrac{a}{b} \,\middle|\, a,b \in \Bbb N, b \ne 0 \right\} $$

$$ \left\{\dfrac{a}{b} \,\middle|\, a,b \in \Bbb N, b \ne 0 \right\} $$

Macros - Commandes Tex simplifiées

Pour simplifier et automatiser les commandes Tex complexes et répétitives, des macros peuvent être définies "inline" avec newcommand en utilisant des balises cachées :

ins[class*="math"] { 
    position: fixed; top: 10px; height: 0px; width: 0px; 
    color: transparent; background-color: transparent; }

<ins class="cmath">
   \( \newcommand {\dvp}[2] { \dfrac{\partial{#1}}{\partial{#2}} } \)
</ins>

$ \newcommand {\dvp}[2] { \dfrac{\partial{#1}}{\partial{#2}} } $

$$ \dvp{H}{T} $$

$$ \dvp{H}{T} $$

Ne pas utiliser la propriété CSS display: none, sinon la nouveauté "Lazy mode" de MathJax v3.2 ne fonctionnera pas, elle utilise l’objet IntersectionObserver.

ou dans l’objet window.MathJax :

Mathjax 3 :

window.MathJax {
 tex : {
  …,
  macros : {
    dvr: ["{ \\dfrac{d#1}{d#2} }",2],
    dvp: ["{ \\dfrac{\\partial{#1}}{\\partial{#2}} }",2]
  }
 }
 …
}

Mathjax 2 :

window.MathJax {
 …,
 TeX : {
  Macros : {
    dvr: ["{ \\dfrac{d#1}{d#2} }",2],
    dvp: ["{ \\dfrac{\\partial{#1}}{\\partial{#2}} }",2]
  }
 }
}

Plus d’informations : MathJax, Macros et packages. Commandes Tex simplifiées

Autonumérotation - AMS (Advanced Math Symbols)

L'autonumérotation des équations est disponible avec MathJax/Tex, fonctionnalité activée dans l’objet window.MathJax.

3 modes possibles : none (default), ams, all.

Mathjax 3 :

window.MathJax {
 tex : {
  …,
  tags : 'ams',
  tagformat: {
    tag:    (tag) => '[' + tag + ']'
  }
 }
 …
}

Le package tagformat doit être chargé si le formatage des tags est requis.

Mathjax 2 :

window.MathJax {
 …,
 TeX : {
  …,
  equationNumbers : {
    autoNumber: 'AMS',
    formatTag: (tag) => '[' + tag + ']'
  }
 }
}

Dans le mode ams (AMS for MathJax 2), seules les équations dans des blocs sans étoile sont numérotées (\begin{align}, \begin{equation}, etc.).

$$ \begin{align}
   E=mc^2
\end{align} $$

$$ \begin{align} E=mc^2 \end{align} $$

Les équations dans les blocs avec étoile ne sont pas numérotésS.

$$ \begin{align*}
   E=mc^2
\end{align*} $$

Ajouter \notag pour désactiver la numérotation pour une équation :

$$ E=mc^2   \notag $$

Vecteurs

\vec est parfait pour une lettre en minuscules

$$ \vec{u} + \vec{v} = \vec{w} $$

$$ \vec{u} + \vec{v} = \vec{w} $$

Pour les lettres en majuscules ou plusieurs lettres dans un vecteur, le rendu n’est pas adéquat

$$ \vec{AB} + \vec{BC} = \vec{AC} $$

$$ \vec{AB} + \vec{BC} = \vec{AC} $$

\overrightarrow devrait être utilisé dans ce cas

$$ \overrightarrow{AB} + \overrightarrow{BC} = \overrightarrow{AC} $$

$$ \overrightarrow{AB} + \overrightarrow{BC} = \overrightarrow{AC} $$

Décorations

$$ \vec{i} \qquad \hat{i} \qquad \bar{i} \qquad \dot{x} \qquad \ddot{x} \qquad \dddot{x}$$

$$ \vec{i} \hat{i} \bar{i} \dot{x} \ddot{x} \dddot{x} $$

$$ \overline{AB} $$

$$ \overline{AB} $$

$$ \widehat{AB} $$

$$ \widehat{AB} $$

$$ \overset{ \huge\frown}{AB} $$

$$ \overset{ \huge\frown}{AB} $$

Flèches

Utiliser les symboles adéquats pour les flèches. On préférera \implies ##\implies## à \Rightarrow ##\Rightarrow## pour l’implication par exemple.

$$ T:\mathbb R \to \mathbb R,\; x \mapsto x+1 $$

$$ T:\mathbb R \to \mathbb R,\; x \mapsto x+1 $$

$$ 2x + 3 =0 \implies x=- {3 \over 2} $$

$$ 2x + 3 = 0 \implies x=- {3 \over 2} $$

$$ \iff \qquad \impliedby $$

$$ \iff  \qquad  \impliedby $$

$$ X\overset{a}{\underset{b}{\to}}Y $$

$$ X \overset{a}{\underset{b}{\to}} Y $$

Limites, sommes, produits, intégrales

Limites

$$ \lim \limits_{ x \to 2^+ } { \dfrac{x+1}{x-2} } $$

$$ \lim \limits_{ x \to 2^+ } { \dfrac{x+1}{x-2} } $$

Sommes, produits

$$ \sum_{n=1}^\infty \frac{1}{n^2} $$

$$ \sum_{n=1}^\infty \frac{1}{n^2} $$

$$ \prod_{n=1}^\infty \frac{1}{n^2} $$

$$ \prod_{n=1}^\infty \frac{1}{n^2} $$

Intégrales

$$ \int_o^\infty e^x dx $$

$$ \int_o^\infty e^x dx $$

$$ \iint_D \qquad \iiint_V \qquad \oint_C $$

$$ \iint_D  \qquad  \iiint_V  \qquad  \oint_C $$

Tous les symboles AMS (Advanced Math Symbol) ne sont pas supportés avec MathJax, par exemple \oiint, \varoiint. Utiliser \unicode :

$$ {\huge\unicode{x222F}}_S \qquad {\huge\unicode{x2230}}_V $$

$$ {\huge\unicode{x222F}}_S   \qquad   {\huge\unicode{x2230}}_V $$

Le package EsInt - Extended set of integrals for Computer Modern sera probablement ajouté comme extension dans MathJax 3.

Divisions de polynômes

Pour les divisons de polynômes, utiliser les tableaux (array).

Long division

$ \displaystyle { \dfrac{x^3 + 4x^2 −3x −12}{x − 3} = x^2 + 7x +18 + \dfrac{42}{x − 3}}$ $$\begin{array} {rrrr|l} x^3 & +4x^2 & −3x & −12 & x − 3 \\ \hline -x^3 & +3x^2 & & & x^2 + 7x +18 \\ & +7x^2 & −3x & −12 & \\ & -7x^2 & +21x & & \\ & & +18x & −12 & \\ & & -18x & +54 & \\ & & & +42 & \\ \end{array}$$

$$\begin{array}
 {rrrr|l}  x^3  & +4x^2  &  −3x  &  −12   &  x − 3        \\
 \hline
           -x^3 & +3x^2  &       &        &  x^2 + 7x +18 \\
                & +7x^2  &  −3x  &  −12   &               \\
                & -7x^2  & +21x  &        &               \\
                &        & +18x  &  −12   &               \\
                &        & -18x  &  +54   &               \\
                &        &       &  +42   &               \\
\end{array}$$

Division synthétique

$ \displaystyle { \dfrac{2x^3 +12x^2 +14x − 3}{ x +4} = 2x^2 + 4x -2 + \dfrac{5}{x +4}} $ $$\begin{array}{c|rrrrr} & x^3 & x^2 & x^1 & x^0 \\ & 2 & 12 & 14 & -3 \\ {\color{red}-4} & & -8 & -16 & +8 \\ \hline & 2 & 4 & -2 &|\phantom{-} {\color{blue}5} \end{array}$$

$$\begin{array}{c|rrrrr}
                 & x^3 & x^2  & x^1  & x^0  \\
                 &  2  &  12  &  14  &  -3  \\
{\color{red}-4}  &     &  -8  & -16  &  +8  \\
\hline
                 & 2   &   4  &  -2  &|\phantom{-} {\color{blue}5}
\end{array}$$

Symboles communs

##\times####\div## ##\pm####\mp## ##\cdot##

##\lt####\gt## ##\le####\leq## ##\ge####\geq## ##\geqq####\geqslant## ##\ne##

##\approx####\sim## ##\simeq####\cong## ##\equiv####\prec## ##\lhd####\therefore##

##\to####\rightarrow## ##\leftarrow####\Rightarrow## ##\Leftarrow####\mapsto##

##\infty####\aleph_0## ##\nabla####\partial## ##\sum####\prod##

##\cup####\cap## ##\setminus####\subset## ##\subseteq####\subsetneq## ##\supset####\in## ##\notin####\emptyset## ##\varnothing##

##\land####\lor## ##\forall####\exists## ##\top####\bot## ##\vdash####\vDash##