MathJax - Mathematical expressions via JavaScript

Jan 04, 2017 JavaScript Math

MathJax is a JavaScript engine to display mathematical expressions in web browsers. I would have needed in it some posts before on my blog, but I have never tried. Today I would like to show how easy I have integrated in my blog.

Install MathJax

Just for testing I have downloaded version 2.7 from the MathJax Github releases and I have unpacked the archive to an accessible directory of my web root. The hole unpacked directory has a size of 70.5 MB.

Include MathJax

MathJax test/sample.html example has the following HTML code in the head element, I will include it at the end of the body.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>
<script type="text/javascript" src="path_to_mathjax/MathJax.js"></script>

Cauchy-Schwarz Inequality example

The following HTML or better Tex code will result in a beautiful mathematical expressions of the Cauchy-Schwarz Inequality.

HTML code

<p>\[
    \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
    \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
\]</p>

Mathematical expression

\[ \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]