How to use MathJax to format HTML math expressions
By:
David
On:
Thu 27 August 2015
formatting math expressions with HTML and CSS alone is possible yet pretty frustrating, a simpler and more beautiful alternative is to use MathJax, which is a JS display engine.
Software
Reading
1. Include MathJax
To start using MathJax, simple include the following code in head or body tag:
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
2. Formatting
MathJax allows the 3 following notations:
- TeX and LaTeX
- MathML
- AsciiMath
The examples will be shown using TeX and LaTeX notation with delimiters for:
center display mathematics:
$$...$$
inline mathematics:
\(...\)
3. Examples:
Superscript:
\(x^2\)
\(x^2\)
Subscript:
\({xy}_0\)
\({xy}_0\)
Fraction:
\(a \over c\)
\(a \over c\)
Square root:
\(\sqrt{a + b}\)
\(\sqrt{a + b}\)
Not equal to:
\(a \ne 0\)
\(a \ne 0\)
Summation:
\(\sum_0^n\)
\(\sum_0^n\)
Integral:
\(\int_0^n\)
\(\int_0^n\)
Space:
\quad
Insert text:
\text{...}
Display mathematics: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$