Chris Henson

ARTICLES ABOUT CONTACT SUBSCRIBE



May 24, 2020
Using MathJax to Display Equations in HTML

Just something small for my first entry here. You might be wondering "how are you going to effectively display equations on your website?"

The mathematics notation is pretty painless, provided you're already familiar with LaTeX. In the header of this page I have the following:


<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
</script>
<script type="text/javascript"
  src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

which imports the JavaScript engine MathJax and allows me to natively use LaTeX in my HTML. So I can simply type:

$$ \sum _{n=1}^{\infty } \frac {1}{n^{2}} =\frac {1}{1^{2}} +
                                           \frac {1}{2^{2}} +
                                           \frac {1}{3^{2}} +
                                           \cdots $$

which is rendered as: $$ \sum _{n=1}^{\infty } \frac {1}{n^{2}} =\frac {1}{1^{2}} + \frac {1}{2^{2}} + \frac {1}{3^{2}} + \cdots $$

Check out the page source (Ctrl+U in chrome) and you'll see that the above equation comes from the exact same code.

If you've never seen that equation before, this is the Basel problem, which will likely be the subject of a future post.