Beautiful formulas in Urubu with MathJax

I love formulas, and I would use them more in my documents -- if only they were easier to enter. If you can relate to that, I have good news: at least in websites like those managed by Urubu, a great solution is now available.

The solution is based on technology developed by MathJax, whose tagline goes Beautiful math in all browsers. They achieve this by XML, CSS and JavaScript magic in the background, but the technology is straightforward to use.

MathJax supports a number of input formats, but the most interesting one is AsciiMath. AsciiMath is to formulas what Markdown is to HTML: an intuitive, human-friendly input language with almost zero overhead. For example, the following input:

`I = int_0^1 (h-l)(qx^p + (1-q)x) + l` 

`\ \ =  (h-l)(q/(p+1) + (1-q)/2) + l`

is rendered in the browser as follows:

`I = int_0^1 (h-l)(qx^p + (1-q)x) + l`

`\ \ = (h-l)(q/(p+1) + (1-q)/2) + l`

Setting this up couldn't be easier. All you need is to refer to the right JavaScript file from a CDN, like so:

<!-- mathjax for asciimath -->
<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML">
</script>

Put this in the <head> section of your base template, let template inheritance peform its magic, and now you can use AsciiMath formulas in any page in your Urubu website source.

There is one small caveat: the backtick delimiter ` used by AsciiMath is also a Markdown delimiter. One solution is to customize the AsciiMath delimiters, but I have not yet bothered to do so. Instead I use the Markdown feature that text between block-level HTML tags is not processed. So I simply put my formulas inside a <p>...</p> pair. Works fine!

23-Jun-2015

Beautiful formulas in Urubu with MathJax