MathJax - Tex : Quick Reference Guide

Logo

More efficient than a long tutorial, Tex equations examples in HTML pages using MathJax javascript library.

Block mode"Inline" mode
Equation code writing 
<div>
  $$   Tex code   $$   
</div>

<div>
  \[   Tex code   \]   
</div>
 
<p> $  Tex code $  </p>

<p> ## Tex code ## </p>

<p> $  Tex code $  </p>

Loading 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 is set to left to override default centering for equations in block mode.

MathJax 3 is available (engine revamping and performance enhancements), to migrate : MathJax v2 configuration to v3 - Online Converter Tool

If AsciiMath is also used, AsciiMath has not yet been fully ported to version 3. Defer the migration.

Loading 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: ['[tex]/noerrors']
      }
    };
 </script>
 <script async="true" src="[path]/tex-chtml.js"></script>
</head>

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}
$$

To omit entries :

$$ \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}
$$

To insert an horizontal separator : \hline

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

To insert a vertical separator : 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] $$

Inline matrices (smallmatrix) :

In matrice ##\bigl(\begin{smallmatrix} a & b \\ c & d \end{smallmatrix}\bigr)##, no numbers.
In matrice
$\bigl(\begin{smallmatrix} a & b \\ c & d \end{smallmatrix}\bigr)$
, no numbers.

Fractions

frac :

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

\over is preferred when numerators and denominators are complex and for readability.

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

dfrac (displaystyle) - Fractions that do not adjust to the line but to the overall style (opening, closing elements, etc.) :

$$ \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 - Continuous fractions :

$$ 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}
      }
    }
$$

Definitions by cases (piecewise functions)

$$ f(n) = \begin{cases} \dfrac{n+1}{2} & \text{if n is even} \\ \\ \dfrac{n}{2} & \text{if n is odd} \end{cases} \qquad \forall n \in \mathbb N $$
$$  f(n) =
\begin{cases}
  \dfrac{n+1}{2} & \text{if n is even} \\ \\
  \dfrac{n}{2}   & \text{if n is odd}
\end{cases}
\qquad \forall n \in \mathbb N       
$$

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}
$$

Centering equations on the sign =

$$ \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}
$$

Equations systems :

$$ \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.
$$

Numbering equations (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}
$$

Tags and references (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*} $$ We deduce from the formulas \( \ref{cos2x} \) and \( \ref{5} \) : $$ \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}
$$
We deduce from the formulas $\ref{cos2x}$ and $\ref{5}$ :
$$
\begin{align}
  \cos 2x &= \cos^2x + \sin^2x - \sin^2x - \sin^2x     \\ \\
          &= 1 - 2\sin^2x
\end{align}  
$$

Highlighting equations (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
}
$$

CSS styles (class)

The syntax \bbox to apply a style implies hard coded properties. Using the syntax \class, a stylesheet can be applied, easier for 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; }

Another example which does not deal with highlighting equations :

$$ ax^2 + bx + c = 0 \\ x = \frac{-b \pm \sqrt{\Delta}}{2a} \class{cmjx-note} { \text{rem : } \Delta=b^2-4ac > 0 } $$
$$
    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

Integral ##\int_{a}^{b} x^2 \,dx## inside text
Integral $ int_{a}^{b} x^2 \,dx $ inside text
Integral ##\displaystyle{ \int_{a}^{b} x^2 \,dx }## inside text using \displaystyle
Integral $ \displaystyle{ int_{a}^{b} x^2 \,dx } $ inside text
using \displaystyle
A sum inside block : $$ \sum_{n=1}^\infty \frac{1}{n^2} $$
$$ \sum_{n=1}^\infty \frac{1}{n^2} $$
A sum inside block in text mode using \textstyle : $$ \textstyle{ \sum_{n=1}^\infty \frac{1}{n^2} } $$
$$ \textstyle{ \sum_{n=1}^\infty \frac{1}{n^2} } $$

Sizing

  • Sizing opening and closing elements (brackets, 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) $$
  • Sizing separators (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 - Tex simplified commands

To simplify and automate complex and repetitive Tex commands, macros can be defined inline using newcommand in hidden tags (display:none) :

<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} $$

Or in the window.MathJax object :

  • 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]
  }
 }
}

More informations : MathJax, Macros and Packages. Tex simplified commands

Autonumbering - AMS (Advanced Math Symbols)

Equations autonumbering is available with MathJax/Tex, feature enabled in the window.MathJax object.

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

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

tagformat package must be loaded if tag formatting is required.

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

Using ams mode (AMS for MathJax 2), only equations in unstarred blocks are numbered (\begin{align}, \begin{equation}, etc.).

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

Starred blocks are not numbered.

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

Add \notag to disable numbering for one equation :

E=mc^2   \notag

Vectors

\vec is perfect for one lower case letter

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

For upper case letters or multiple letters in a vector, rendering is not appropriate

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

\overrightarrow should be used in this case

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

Decorations

$$ \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} $$

Arrows

Use the right symbols for arrows. Prefer \implies ##\implies## to \Rightarrow ##\Rightarrow## for implication for example.

$$ T:\mathbb R \to \mathbb R,\; x \mapsto x+1 $$
$$ T:\mathbb R \to \mathbb R,\; x \mapsto x+1 $$
$$ 2x + 3 \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 $$

Limits, sums, products, integrals

  • Limits
$$ \lim \limits_{ x \to 2^+ } { \dfrac{x+1}{x-2} } $$
$$ \lim \limits_{ x \to 2^+ } { \dfrac{x+1}{x-2} } $$
  • Sums, products
$$ \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} $$
  • Integrals
$$ \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 $$

All AMS symbols (Advanced Math Symbols) are not supported in Mathjax, for example \oiint, \varoiint. Use \unicode :

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

Package EsInt - Extended set of integrals for Computer Modern will be probably added in MathJax 3 as an extension.

Common symbols

##\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##