Monday 20 October 2014

MathJax vs KaTeX in blogger

Being a blog that will often contain some mathematics and physics, I will need to typeset some mathematics. Since MathML has dismal support, with Chrome and IE not looking like supporting it soon, the default solution [1] is currently MathJax.
MathJax renders maths from LaTeX or MathML source across all major browsers and renders it beautifully. It also allows for numbered equations and cross referencing. Sounds perfect!
The problem is that it's a very large javascript library (mitigated somewhat by it being served from its own CDN) and quite slow at rendering mathematics, especially on slow connections or low powered devices.
Other options include: using images, possibly automatically rendered via CodeCogs;
various CSS hacks that don't typeset the mathematics perfectly [1, 2, ...]; and the new comer, KaTeX. KaTeX is trying to walk the middle line and get relatively fast maths rendering, cross platform and has a fall-back to MathJax.


MathJax is easy to enable and use. In HTML editing mode,

simply add the following code to load MathJax from their CDN:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
Then just type inline LaTeX mathematics between the \( \) delimiters and displaystyle mathematics between the\[...\] delimiters.

You could add this code to the template of your blogger blog, however I couldn't get this working on my blog and apparently it keeps getting broken as the Google developers change aspects of the Blogger platform.

Here's an example of MathJax rendered mathematics: \( (x+iy)^2=x^2-y^2+2ixy \).
\[ \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ . \]


KaTeX is a little harder to use in Blogger. This is mainly because the KaTeX script will not search for customizable delimiters like the MathJax script. Instead, you need to actually tell KaTeX what divs to render. Here is the simplest work flow that I have managed to come up with a minimal amount of thought and time.

First, load the script and stylesheet. For convenience I choose to load them from the cloudflare CDN service. Add the following lines to the top of the page in HTML editing mode:
<link href="htpp://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.0/katex.min.css" rel="stylesheet"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.0/katex.min.js"></script>


Type your maths in using LaTeX snippets, then in HTML mode wrap them with a div or block: e.g.,
<block class="eqn">(x+iy)^2=x^2-y^2+2ixy</block>
will render inline as (x+iy)^2=x^2-y^2+2ixy. Using the \displaystyle TeX command will change the maths to look like
\displaystyle \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ .

At the end of the document you need a script like:
<script type="text/javascript">
    // get and render all elements in DOM with the class 'eqn'
    var eqn = document.getElementsByClassName("eqn");
    [].forEach.call(eqn, function(e) {katex.render(e.innerHTML, e); });
</script>


Conclusion: For now I think I will stick with MathJax. It is easier to use in Blogger as you can just type your LaTeX in as normal text and not have to worry about switching to the HTML view. Also, I don't plan on having posts that are too math heavy...