MathJax Quick Start Tutorial

mathjax-logo-01About MathJax

MathJax is a cross-browser JavaScript library that displays mathematical equations in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache license.

MathJax downloads with web page content, scans the page content for equation markup, and typesets the math. Thus, MathJax requires no installation of software or extra fonts on the reader’s system. This allows MathJax to run in any browser with JavaScript support, including mobile devices.

MathJax can display math by using a combination of HTML and CSS or by using the browser’s native MathML support, when available. The exact method MathJax uses to typeset math is determined by the capabilities of the user’s browser, fonts available on the user’s system, and configuration settings. MathJax v2.0-beta introduced SVG rendering.

In the case of HTML and CSS typesetting, MathJax maximizes math display quality by using math fonts if available and by resorting to images for older browsers. For newer browsers that support web fonts, MathJax provides a comprehensive set of web fonts, which MathJax downloads as needed. If the browser does not support web fonts, MathJax checks if valid fonts are available on the user’s system. If this does not work, MathJax provides images of any symbols needed.[clarification needed] MathJax can be configured to enable or disable web fonts, local fonts, and image fonts.

MathJax uses the STIX fonts for including mathematics in web pages. Installing the fonts on the local computer improves MathJax’s typesetting speed.
MathJax can display mathematical notation written in LaTeX or MathML markup. Because MathJax is meant only for math display and LaTeX is a document layout language, MathJax only supports the subset of LaTeX used to describe mathematical notation.

MathJax also supports math accessibility by exposing MathML through its API to assistive technology software, as well as the basic WAI-ARIA ‘role’ and older ‘altext’ attributes.

The MathJax architecture is designed to support the addition of input languages and display methods in the future via dynamically loaded modules. MathJax also includes a JavaScript API for enumerating and interacting with math instances in a page.

Installation

To enable MathJax in your web platform, add the line:

<script type=”text/javascript” src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”></script>

either just before the </head> tag in your theme file, or at the end of the file if it contains no </head>.

- To see how any of the formulas were made in any question or answer, including this one, use the “edit” link to view the complete source. To quickly see the source of a single expression, right-click on it and choose “Show Math As > TeX Commands”.

(Note that in some browsers, such as Firefox, the MathJaX right-click menu that contains this command will be obscured by the browser’s own right-click menu. Click somewhere outside the main browser canvas — such as in the address bar — to dismiss the browser menu and reveal the MatJaX one behind it).

- For inline formulas, enclose the formula in \($…$\). For displayed formulas, use \($$…$$\)

These render differently: \(\sum_{i=0}^n i^2 = \frac{n^2+n}{2}\) (inline) or

\(\sum_{i=0}^n i^2 = \frac{n^2+n}{2}\tag{displayed}\)

Greek letters

For Greek letters, use \alpha, \beta, …, \omega: α,β,…ω. For uppercase, use \Gamma, \Delta, …, \Omega: Γ,Δ,…,Ω.

Superscripts and subscripts

For superscripts and subscripts, use ^ and _. For example, x_i^2: x2i.

By default, superscripts, subscripts, and other operations apply only to the next “group”. A “group” is either a single symbol, or any formula surrounded by curly braces {…}. If you do 10^10, you will get a surprise: \(10^10\). But 10^{10} gives what you probably wanted: \(10^{10}\). Use curly braces to delimit a formula to which a superscript or subscript applies: x^5^6 is an error; {x^y}^z is \({x^y}^z\), and x^{y^z} is \(x^{y^z}\). Observe the difference between x_i^2 \(x_i^2\) and x_{i^2} \(x_{i^2}\).

Parentheses

Parentheses Ordinary symbols ()[] make parentheses and brackets (2+3)[4+4]. These do not scale with the formula in between, so if you write (\frac12) the parentheses will be too small: \((\frac12)\).

Using \left(…\right) will make the sizes adjust automatically to the formula they enclose: \left(\frac12\right) is \(\left(\frac12\right)\).

\left and\right apply to all the following sorts of parentheses: | \(|x|\), \langle and \rangle \(\langle x \rangle\), \{ and \} \(\lbrace x \rbrace\), \lceil and \rceil \(\lceil x \rceil\), and \lfloor and \rfloor \(\lfloor x \rfloor\). There are also invisible parentheses, denoted by .: \left.\frac12\right\rbrace is \(\left.\frac12\right\rbrace\).

Sums and integrals

\sum and \int; the subscript is the lower limit and the superscript is the upper limit, so for example \sum_1^n \(\sum_1^n\). Don’t forget {…} if the limits are more than a single symbol. For example, \sum_{i=0}^\infty i^2 is \(\sum_{i=0}^\infty i^2\). Similarly, \prod \(\prod\), \int \(\int\), \bigcup \(\bigcup\), \bigcap \(\bigcap\), \iint \(\iint\).

Fractions

There are two ways to make these. \frac ab applies to the next two groups, and produces \(\frac ab\); for more complicated numerators and denominators use {…}: \frac{a+1}{b+1} is \(\frac{a+1}{b+1}\). If the numerator and denominator are complicated, you may prefer \over, which splits up the group that it is in: {a+1\over b+1} is \({a+1\over b+1} \).

Fonts

Use \mathbb or \Bbb for “blackboard bold”: \(\mathbb{CALCULATORIUM}\).

Use \mathbf for boldface: \(\mathbf{CALCULATORIUM}\) \(\mathbf{calculatorium}\).

Use \mathtt for “typewriter” font: \(\mathtt{CALCULATORIUM}\) \(\mathtt{calculatorium}\).

Use \mathrm for roman font: \(\mathrm{CALCULATORIUM}\) \(\mathrm{calculatorium}\).

Use \mathcal for “calligraphic” letters: \(\mathcal{ CALCULATORIUM}\)

Use \mathscr for script letters: \(\mathscr{CALCULATORIUM}\)

Use \mathfrak for “Fraktur” (old German style) letters: \(\mathfrak{CALCULATORIUM}\) \(\mathfrak{calculatorium}\).

Radical signs

Use sqrt, which adjusts to the size of its argument: \sqrt{x^3} \(\sqrt{x^3}\); \sqrt[3]{\frac xy}\(\sqrt[3]{\frac xy}\). For complicated expressions, consider using {…}^{1/2} instead.

Special functions and symbols

Some special functions such as “lim”, “sin”, “max”, “ln”, and so on are normally set in roman font instead of italic font. Use \lim, \sin, etc. to make these: \sin x sinx, not sin x sinx. Use subscripts to attach a notation to \lim: \lim_{x\to 0}

\(\lim_{x\to 0}\)

There are a very large number of special symbols and notations, too many to list here; see this shorter listing, or this exhaustive listing. Some of the most common include:

\lt \gt \le \ge \neq <>≤≥≠. You can use \not to put a slash through almost anything: \not\lt ≮ but it often looks bad.

\times \div \pm \mp ×÷±∓. \cdot is a centered dot: x⋅y

\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing ∪∩∖⊂⊆⊊⊃∈∉∅∅
{n+1 \choose 2k} or \binom{n+1}{2k} (n+12k)

\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto →→←⇒⇐↦

\land \lor \lnot \forall \exists \top \bot \vdash \vDash ∧∨¬∀∃⊤⊥⊢⊨

\star \ast \oplus \circ \bullet ⋆∗⊕∘∙

\approx \sim \cong \equiv \prec ≈∼≅≡≺.

\infty \aleph_0 ∞ℵ0 \nabla \partial ∇∂ \Im \Re JR

For modular equivalence, use \pmod like this: a\equiv b\pmod n a≡b(modn).

\ldots is the dots in a1,a2,…,an \cdots is the dots in a1+a2+⋯+an

Some Greek letters have variant forms: \epsilon \varepsilon ϵε, \phi \varphi ϕφ, and others. Script lowercase l is \ell ℓ.

Detexify lets you draw a symbol on a web page and then lists the TEX symbols that seem to resemble it. These are not guaranteed to work in MathJaX but are a good place to start.

Spaces

MathJaX usually decides for itself how to space formulas, using a complex set of rules. Putting extra literal spaces into formulas will not change the amount of space MathJaX puts in: a␣b and a␣␣␣␣b are both \(a    b\). To add more space, use \, for a thin space \(a\,b\); \; for a wider space \(a\;b\). \quad and \qquad are large spaces: \(a\quad b\), \(a\qquad b\).

Accents and diacritical marks

Use \hat for a single symbol \(\hat x\), \widehat for a larger formula \(\widehat{xy}\). If you make it too wide, it will look silly. Similarly, there are \bar \(\bar x\) and \overline \(\overline{xyz}\), and \vec \(\vec x\)  and \overrightarrow \(\overrightarrow{xy}\). For dots, as in \(\frac d{dx}x\dot x =  \dot x^2 +  x\ddot x\), use \dot and \ddot.

Aligned equations

Often people want a series of equations where the equals signs are aligned. To get this, use \begin{align}…\end{align}. Each line should end with \\, and should contain an ampersand at the point to align at, typically immediately before the equals sign.

For example,

\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
& = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\
& = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
& = \frac{73}{12}\sqrt{1 – \frac{1}{73^2}} \\
& \approx \frac{73}{12}\left(1 – \frac{1}{2\cdot73^2}\right)
\end{align}

is produced by:

\begin{align}
 \sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
 & = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\
 & = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
 & = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\
 & \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
 \end{align}

Matrices

- Use $$\begin{matrix}…\end{matrix}$$ In between the \begin and \end, put the matrix elements. End each matrix row with \\, and separate matrix elements with &. For example,

\begin{matrix} 
1 & x & x^2 \\ 
1 & y & y^2 \\ 
1 & z & z^2 \\ 
\end{matrix}

produces:

\begin{matrix}
1 & x & x^2 \\
1 & y & y^2 \\
1 & z & z^2 \\
\end{matrix}

MathJax will adjust the sizes of the rows and columns so that everything fits.

- To add brackets, either use \left…\right, or replace matrix with pmatrix \begin{pmatrix}1&2\\3&4\\ \end{pmatrix}, bmatrix \begin{bmatrix}1&2\\3&4\\ \end{bmatrix}, Bmatrix \begin{Bmatrix}1&2\\3&4\\ \end{Bmatrix}, vmatrix \begin{vmatrix}1&2\\3&4\\ \end{vmatrix}, Vmatrix \begin{Vmatrix}1&2\\3&4\\ \end{Vmatrix}.

Definitions by cases

Use \begin{cases}…\end{cases}. End each case with a \\, and use & before parts that should be aligned.

For example, you get this:

f(n) = \begin{cases}
n/2, & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd} \\
\end{cases}

by writing this:

f(n) =
\begin{cases}
n/2, & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd} \\
\end{cases}

Arrays

It is often easier to read tables formatted in MathJaX rather than plain text or a fixed width font. Arrays and tables are created with the array environment. Just after \begin{array} the format of each column should be listed, use c for a center aligned column, r for right aligned, l for left aligned and a | for a vertical line. Just as with matrices, cells are separated with & and rows are broken using \\. A horizontal line spanning the array can be placed before the current line with \hline.

Ex.

\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\
\hline
1 & 0.24 & 1 & 125 \\
2 & -1 & 189 & -8 \\
3 & -20 & 2000 & 1+10i \\
\end{array}

with the following code

\begin{array}{c|lcr} 
n & \text{Left} & \text{Center} & \text{Right} \\ 
\hline 
1 & 0.24 & 1 & 125 \\ 
2 & -1 & 189 & -8 \\ 
3 & -20 & 2000 & 1+10i \\ 
\end{array}

Fussy spacing issues

These are issues that won’t affect the correctness of formulas, but might make them look significantly better or worse. Beginners should feel free to ignore this advice; someone else will correct it for them, or more likely nobody will care.

Don’t use \frac in exponents or limits of integrals; it looks bad and can be confusing, which is why it is rarely done in professional mathematical typesetting. Write the fraction horizontally, with a slash:

\begin{array}{cc}
\mathrm{Bad} & \mathrm{Better} \\
\hline \\
e^{i\frac{\pi}2} \quad e^{\frac{i\pi}2}& e^{i\pi/2} \\
\int_{-\frac\pi2}^\frac\pi2 \sin x\,dx & \int_{-\pi/2}^{\pi/2}\sin x\,dx \\
\end{array}

The | symbol has the wrong spacing when it is used as a divider, for example in set comprehensions. Use \mid instead:

\begin{array}{cc}
\mathrm{Bad} & \mathrm{Better} \\
\hline \\
\{x|x^2\in\Bbb Z\} & \{x\mid x^2\in\Bbb Z\} \\
\end{array}

For double and triple integrals, don’t use \int\int or \int\int\int. Instead use the special forms \iint and \iiint:

\begin{array}{cc}
\mathrm{Bad} & \mathrm{Better} \\
\hline \\
\int\int_S f(x)\,dy\,dx & \iint_S f(x)\,dy\,dx \\
\int\int\int_V f(x)\,dz\,dy\,dx & \iiint_V f(x)\,dz\,dy\,dx
\end{array}

Use \, to insert a thin space before differentials; without this TEX will mash them together:

\begin{array}{cc}
\mathrm{Bad} & \mathrm{Better} \\
\hline \\
\iiint_V f(x)dz dy dx & \iiint_V f(x)\,dz\,dy\,dx
\end{array}

Continued fractions

To make a continued fraction, use \cfrac, which works just like \frac but typesets the results differently:

\( x = a_0 + \cfrac{1^2}{a_1
+ \cfrac{2^2}{a_2
+ \cfrac{3^2}{a_3 + \cfrac{4^4}{a_4 + \cdots}}}} \)

Don’t use regular \frac or \over, or it will look awful:

\( x = a_0 + \frac{1^2}{a_1
+ \frac{2^2}{a_2
+ \frac{3^2}{a_3 + \frac{4^4}{a_4 + \cdots}}}} \)

You can of course use \frac for the compact notation:

\( x = a_0 + \frac{1^2}{a_1+}
\frac{2^2}{a_2+}
\frac{3^2}{a_3 +} \frac{4^4}{a_4 +} \cdots \)

Continued fractions are too big to put inline. Display them with $$…$$ or use a notation like [a_0; a_1, a_2, a_3, \ldots]

System of equations

- Use

\begin{array}…\end{array}

and \left\{…\right.. For example, you get this:

\( \left\{
\begin{array}{c}
a_1x+b_1y+c_1z=d_1 \\
a_2x+b_2y+c_2z=d_2 \\
a_3x+b_3y+c_3z=d_3
\end{array}
\right. \)

by writing this:

\( \left\{
\begin{array}{c}
a_1x+b_1y+c_1z=d_1 \\
a_2x+b_2y+c_2z=d_2 \\
a_3x+b_3y+c_3z=d_3
\end{array}
\right. \)

- Alternatively we can use \begin{cases}…\end{cases}. The same system

\begin{cases}
a_1x+b_1y+c_1z=d_1 \\
a_2x+b_2y+c_2z=d_2 \\
a_3x+b_3y+c_3z=d_3
\end{cases}

is produced by the following code

$$\begin{cases}
 a_1x+b_1y+c_1z=d_1 \\
 a_2x+b_2y+c_2z=d_2 \\
 a_3x+b_3y+c_3z=d_3
 \end{cases}
 $$

- To align the = signs use \begin{aligned}…\end{aligned} and \left\{…\right.

$$\left\{\begin{aligned} a_1x+b_1y+c_1z&=d_1+e_1 \\
a_2x+b_2y&=d_2 \\
a_3x+b_3y+c_3z&=d_3 \end{aligned} \right.$$

which code is

$$
 \left\{
 \begin{aligned}
 a_1x+b_1y+c_1z &=d_1+e_1 \\
 a_2x+b_2y&=d_2 \\
 a_3x+b_3y+c_3z &=d_3
 \end{aligned}
 \right.
 $$

- To align the = signs and the terms as in

$$\left\{\begin{array}{ll}a_1x+b_1y+c_1z &=d_1+e_1 \\ a_2x+b_2y &=d_2 \\ a_3x+b_3y+c_3z &=d_3 \end{array} \right.$$

use array with l (for “align left”; there are also c and r) parameters

$$
 \left\{
 \begin{array}{ll}
 a_1x+b_1y+c_1z &=d_1+e_1 \\
 a_2x+b_2y &=d_2 \\
 a_3x+b_3y+c_3z &=d_3
 \end{array}
 \right.
 $$

Colors

Named colors are browser-dependent; if a browser doesn’t know a particular color name, it may render the text as black. But many of these colors will be undersood by all browsers:

\begin{array}{|rc|}
\hline
\verb+\color{black}{text}+ & \color{black}{text} \\
\verb+\color{darkgray}{text}+ & \color{darkgray}{text} \\
\verb+\color{gray}{text}+ & \color{gray}{text} \\
\verb+\color{lightgray}{text}+ & \color{lightgray}{text} \\
\hline
\verb+\color{darkred}{text}+ & \color{darkred}{text} \\
\verb+\color{red}{text}+ & \color{red}{text} \\
\verb+\color{orange}{text}+ & \color{orange}{text} \\
\verb+\color{yellow}{text}+ & \color{yellow}{text} \\
\verb+\color{lightgreen}{text}+ & \color{lightgreen}{text} \\
\verb+\color{green}{text}+ & \color{green}{text} \\
\verb+\color{darkgreen}{text}+ & \color{darkgreen}{text} \\
\verb+\color{cyan}{text}+ & \color{cyan}{text} \\
\verb+\color{darkcyan}{text}+ & \color{darkcyan}{text} \\
\verb+\color{blue}{text}+ & \color{blue}{text} \\
\verb+\color{purple}{text}+ & \color{purple}{text} \\
\verb+\color{magenta}{text}+ & \color{magenta}{text} \\
\verb+\color{pink}{text}+ & \color{pink}{text} \\
\hline
\end{array}

The color may also have the form #rgb where r,g,b are base-16 digits the represent the intensity of red, green, and blue on a 0–15. For example:

\begin{array}{|rrrrrrrr|}\hline
\verb+#000+ & \color{#000}{text} & & &
\verb+#00F+ & \color{#00F}{text} & & \\
& & \verb+#0F0+ & \color{#0F0}{text} &
& & \verb+#0FF+ & \color{#0FF}{text}\\
\verb+#F00+ & \color{#F00}{text} & & &
\verb+#F0F+ & \color{#F0F}{text} & & \\
& & \verb+#FF0+ & \color{#FF0}{text} &
& & \verb+#FFF+ & \color{#FFF}{text}\\
\hline
\end{array}

\begin{array}{|rrrrrrrr|}
\hline
\verb+#000+ & \color{#000}{text} & \verb+#005+ & \color{#005}{text} & \verb+#00A+ & \color{#00A}{text} & \verb+#00F+ & \color{#00F}{text} \\
\verb+#500+ & \color{#500}{text} & \verb+#505+ & \color{#505}{text} & \verb+#50A+ & \color{#50A}{text} & \verb+#50F+ & \color{#50F}{text} \\
\verb+#A00+ & \color{#A00}{text} & \verb+#A05+ & \color{#A05}{text} & \verb+#A0A+ & \color{#A0A}{text} & \verb+#A0F+ & \color{#A0F}{text} \\
\verb+#F00+ & \color{#F00}{text} & \verb+#F05+ & \color{#F05}{text} & \verb+#F0A+ & \color{#F0A}{text} & \verb+#F0F+ & \color{#F0F}{text} \\
\hline
\verb+#080+ & \color{#080}{text} & \verb+#085+ & \color{#085}{text} & \verb+#08A+ & \color{#08A}{text} & \verb+#08F+ & \color{#08F}{text} \\
\verb+#580+ & \color{#580}{text} & \verb+#585+ & \color{#585}{text} & \verb+#58A+ & \color{#58A}{text} & \verb+#58F+ & \color{#58F}{text} \\
\verb+#A80+ & \color{#A80}{text} & \verb+#A85+ & \color{#A85}{text} & \verb+#A8A+ & \color{#A8A}{text} & \verb+#A8F+ & \color{#A8F}{text} \\
\verb+#F80+ & \color{#F80}{text} & \verb+#F85+ & \color{#F85}{text} & \verb+#F8A+ & \color{#F8A}{text} & \verb+#F8F+ & \color{#F8F}{text} \\
\hline
\verb+#0F0+ & \color{#0F0}{text} & \verb+#0F5+ & \color{#0F5}{text} & \verb+#0FA+ & \color{#0FA}{text} & \verb+#0FF+ & \color{#0FF}{text} \\
\verb+#5F0+ & \color{#5F0}{text} & \verb+#5F5+ & \color{#5F5}{text} & \verb+#5FA+ & \color{#5FA}{text} & \verb+#5FF+ & \color{#5FF}{text} \\
\verb+#AF0+ & \color{#AF0}{text} & \verb+#AF5+ & \color{#AF5}{text} & \verb+#AFA+ & \color{#AFA}{text} & \verb+#AFF+ & \color{#AFF}{text} \\
\verb+#FF0+ & \color{#FF0}{text} & \verb+#FF5+ & \color{#FF5}{text} & \verb+#FFA+ & \color{#FFA}{text} & \verb+#FFF+ & \color{#FFF}{text} \\
\hline
\end{array}

 

 

Share This Post

Recent Articles

Leave a Reply