Pages

Thursday, March 28, 2013

MathJax

A few days ago I heard about MathJax, "an open source JavaScript display engine for mathematics that works in all modern browsers."  As this is a blog dealing with mathematics, I require that my host supports some form of mathematical markup, preferably LaTeX.  WordPress.com allows basic LaTeX, but its engine renders images, which do not scale well on mobile devices.  MathJax renders the markup in CSS and Web fonts, which scale nicely even in a mobile setting.

To enable MathJax on this blog I navigated to Design>Template>Edit Html and then inserted the following script immediately after the <head> tag:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
 TeX: { equationNumbers: { autoNumber: "AMS" }}, 
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
     processEscapes: true
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script>

For instance, the following LaTeX
We consider the very famous formula
\begin{equation}
    e^{i \pi} = -1. \label{eq:1}
\end{equation}
Given \eqref{eq:1}, we may deduce ...
is typeset as
We consider the very famous formula \begin{equation} e^{i \pi} = -1. \label{eq:1} \end{equation} Given \eqref{eq:1}, we may deduce ...
As far as I can tell, MathJax will render LaTeX inserted into comments as well. There is an extension for MathJax called XyJax that aims to provide commutative diagram support, but as of this writing I was unable to get this running on Blogger.