Use beautiful math on your website with MathJax

MathJax is JavaScript library which provides beautiful math formulas visualization for a website.

To use MathJax on your website first include library scripts:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Some formulas have center align by default. To make everything aligned left add this option before the scripts mentioned above:

<script type="text/javascript">
    MathJax =
    {
        chtml : {displayAlign : "left"}
    };
</script>

And that's it! Now you can write beautiful math with a simple syntax language. Just write it inside HTML elements, no special tags needed. Here are some examples:

Fermat's Last Theorem

$$X^n + Y^n = Z^n, n > 2$$

$$X^n + Y^n = Z^n, n > 2$$

Line equation

$$\vec r = \vec p + \vec a t$$

$$\vec r = \vec p + \vec a t$$

Partial derivative

$$\frac{\partial F(\vec r)}{\partial x}$$

$$\frac{\partial F(\vec r)}{\partial x}$$

Distance between two points

$$|\vec b - \vec a| = \sqrt{(b_x - a_x)^2 + (b_y - a_y)^2 + (b_z - a_z)^2}$$

$$|\vec b - \vec a| = \sqrt{(b_x - a_x)^2 + (b_y - a_y)^2 + (b_z - a_z)^2}$$

System of equations

$$ \left\{ \begin{array}{l} x = r \sin \theta \cos \varphi, \\ y = r \sin \theta \sin \varphi, \\ z = r \cos \theta \end{array} \right. $$

$$
\left\{ 
\begin{array}{l}
x = r \sin \theta \cos \varphi, \\
y = r \sin \theta \sin \varphi, \\
z = r \cos \theta
\end{array}
\right.
$$

Harmonic series

$$\sum_{i=1}^n = \frac{1}{i}$$

$$\sum_{i=1}^n = \frac{1}{i}$$