More efficient than a long tutorial, Tex equations examples in HTML pages using MathJax javascript library.
| Block mode | "Inline" mode | |
|---|---|---|
| Equation code writing | |
|
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
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: ['input/tex','output/chtml','[tex]/noerrors','ui/lazy'] } };</script> <script async="true" src="[path]/startup.js"></script> </head>
AsciiMath 2 syntax is available since version 3.1.3 (April 2021), to use asciimath :
loader: { load: […,'input/asciimath'] }Lazy mode, a great feature for performances, is available starting MathJax 3.2.0 (June 2021), equations are rendered only when they intersect the viewport :
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}
$$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.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 :
$$ \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
Integral ##\int_{a}^{b} x^2 \,dx## inside text
Integral $ int_{a}^{b} x^2 \,dx $ inside textIntegral ##\displaystyle{ \int_{a}^{b} x^2 \,dx }## inside text using \displaystyle
Integral $ \displaystyle{ int_{a}^{b} x^2 \,dx } $ inside text
using \displaystyleA 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 :
ins[class*="math"] {
position: fixed; top: 10px; height: 0px; width: 0px;
color: transparent; background-color: transparent; }\( \newcommand {\dvp}[2] { \dfrac{\partial{#1}}{\partial{#2}} } \)<ins class="cmath">\( \newcommand {\dvp}[2] { \dfrac{\partial{#1}}{\partial{#2}} } \)</ins>
$$ \dvp{H}{T} $$$$ \dvp{H}{T} $$
Do not use the CSS property display: none, otherwise the
MathJax v3.2 new lazy mode feature won’t work, this feature uses the IntersectionObserver object.
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 \notagVectors
\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 = 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 $$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.
Polynoms divisions
For polynoms divisions, use arrays.
- 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}$$- Synthetic division
\( \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}$$