Beautiful cross-browser equations with MathJax
Some posts about my IoT solution that helps me to cool eisbock beer to freezing needed mathematical equations. One example is my post Beer IoT: Measuring cooling rate. I know I can use poorly supported MathML or bitmap images but both of these solutions come with problems. I tried to find some better solution and found MathJax.
For short, MathJax is JavaScript library that supports some known textual formats for equations and based on this it is able to create equations that looks nice in browser. I’m a little bit familiar with LaTeX syntax and it is also supported.
Live examples
The equations below were generated by MathJax when page loaded.
| Equation in LaTeX | MathJax result |
|---|---|
| x=\frac{1+y}{1+2z^2} | $$x=\frac{1+y}{1+2z^2}$$ |
| \int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2} | $$\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}$$ |
| F(x,y)=0 ~~\mbox{and}~~ \left| \\begin{array}{ccc} F”_{xx} & F”_{xy} & F’_x \\ F”_{yx} & F”_{yy} & F’_y \\ F’_x & F’_y & 0 \\end{array}\right| = 0 | $$F(x,y)=0 ~~\mbox{and}~~\left| \begin{array}{ccc} F”_{xx} F”_{xy} & F’_x \\ F”_{yx} & F”_{yy} & F’_y \\ F’_x & F’_y & 0 \end{array}\right| = 0$$ |
| \lim_{x\to 0}{\frac{e^x-1}{2x}} \overset{\left[\frac{0}{0}\right]}{\underset{\mathrm{H}}{=}} \lim_{x\to 0}{\frac{e^x}{2}}={\frac{1}{2}} | $$ \lim_{x\to 0}{\frac{e^x-1}{2x}} \overset{\left[\frac{0}{0}\right]}{\underset{\mathrm{H}}{=}} \lim_{x\to 0}{\frac{e^x}{2}}={\frac{1}{2}} $$ |
Nice, isn’t it?
Using MathJax
I went the simplest way and included MathJax from their CDN. Just add this script block to heading of your page.
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
Now just start writing your equations. Make sure you put your equestions between two dollar signs. There are also other options available but I went with dollar sings.
To find out more about MathJax read their documentation.
