How to Display Mathematical Expressions in Blog

As part of my Machine Learning course, I wanted to share some of my learnings / notes in this blog so that someone will find it useful and I could also refer to it later. But I was not sure how to display the mathemtical expressions used in calculating cost function, gradient descent etc. in my blog. I have used the OneNote Equation tool before, but didn’t know how to do it on the Web for my blog. So I explored the options and here is what I found.

First of all, I had to find a good JavaScript library that can display mathematical expressions described in a LaTeX-style syntax in the HTML (or Markdown) source of a web page. It turns out that the best such library is MathJax. It produces high quality typesetting that scales to full resolution which renders beautifully on the web page. More importantly, it uses web-based fonts, so the person who views the HTML page does not have to install any plugins to view those equations. MathJax is very easy to use, you just include a script tag in the HTML to load the JavaScript from a CDN, configure your preferences and start writing mathematical expressions in your content. Here are the detailed steps on how to get started with MathJax.

Then my question was how do I use it with my blog engine Hugo. With a quick Googling, I found this good article MathJax Support on Hugo site itself. Lovely! (and it looks like writing mathematical expressions is a very popular requirement). The instructions are easy to follow and I could set it up in a few minutes. One thing I realized is that in order to show inline style mathematics, MathJax uses the syntax of a single backslash followed by parentheses. But in Hugo, I have to use double backslash followed by parentheses. If you are using any other blog engine like Tumblr, TypePad, Weebly etc., check out this article.

So now, my blog is ready to display mathemtical expressions. Here is a sample expression of quadratic equation that shows both inline and display expressions:

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are as follows: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

comments powered by Disqus