Convert LaTeX into HTML with MathJax

LaTeX (pronounced LAY-tek) is a high-quality typesetting and document preparation system, primarily used in academia. You can create LaTeX documents easily by going to overleaf.com and setting up a free account. LaTeX is widely used in STEM fields and economics due to its elegant presentation for mathematical equations and Greek symbols.

Here’s a good example of the benefits of LaTeX. For anyone who has taken prob & stats course (or any of the numerous variations) at some point during their college careers, you might remember the formula for the correlation coefficient of a sample data set. From Wikipedia:

Now imagine trying to communicate that in Microsoft Word, or pretty much any word processing program, and you may want to run away like a Medieval knight facing a pack of murderous bunnies!

The beauty of LaTeX is that you can communicate this stylistically complex formula in an elegant fashion. I was able to recreate Pearson’s correlation with the following code:

\begin{displaymath}
r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt[]{\sum_{i=1}^{n}(x_i - \bar{x})^2 \sum_{i=1}^{n}(y_i - \bar{y})^2}}
\end{displaymath}

And it looks pretty much identical to the Wikipedia version:

This is likely due to the fact that the Wikipedia entry is using LaTeX (or something similar), as well. We can verify this by looking at the code inserted into Wikipedia:

:<math>r =\frac{\sum ^n _{i=1}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum ^n _{i=1}(x_i - \bar{x})^2} \sqrt{\sum ^n _{i=1}(y_i - \bar{y})^2}}</math>

So how do we get LaTeX formatting to work in our own websites? I investigated this issue the other day and found many proposals, but by far, the simplest way I discovered was to use Pandoc and MathJax.

Pandoc

Pandoc is a universal document converter that allows you to convert something from one markup language to the another. Pandoc markets itself as a “swiss-army knife” of sorts, and it’s quite useful for converting LaTeX into HTML 5. You can test it out yourself at this link. You can see my correlation code translated into HTML5 in the image below:

I will admit it is not without its flaws, but I’d consider it to be a tool similar to Google Translate, in that its not always perfect, but it’s still a pretty great resource. I can now take pandoc code and put it into an HTML file, but there’s still another step.

MathJax

I’ve only started exploring MathJax and I’m sure there are others out there that could sing its praises more extensively, but even after only using it for one day, I can say it’s a great tool.

There are a few different ways to get MathJax to work on your webpage, but the easiest is to simply copy and paste this code into your code editor.

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

And voila, you can now share your beautiful mathematical equations written in LaTeX on the world wide web! That’s all there is to it!