Felix Breuer's Blog

Writing Mathematics with Textile and MathJax

Note: This post is out of date. By now my blog has moved to a different platform.

Recently Peter and I have been discussing various technological means of blogging about mathematics. From the point of view of a LaTeX user, it may seem the cleanest solution to write the blog post in LaTeX and then process the .tex file to generate HTML+MathML. However, to me this does not appear to be the web-way of doing things. Especially as, while I certainly do appreciate LaTeX as a typesetting system, I am not overly fond of LaTeX as a file format.

The solution we have been experimenting with is the following. First of all we needed a blogging engine. Commercial blogging sites do not appeal to me as I am reluctant to surrender the texts I write to some database I do not control. And running my own database-backed blogging engine is not much more attractive. Here static blogging software such as Jekyll or Blogofile come to the rescue. There the idea is to keep your texts as files on your harddrive, run the software on your system to generate a set of static HTML pages that constitute your blog and then upload these pages to a server of your choosing.

These static site generators can process posts written in HTML, which we might generate from LaTeX. But adding more stages of processing does not help the ease of use. Canonically, blog posts for these generators are written using a lightweight syntax such as Textile or Markdown. The idea now was to combine these tools with MathJax to handle mathematical markup. MathJax is JavaScript software that parses the text of a web page for standard LaTeX markup such as $a+b$ or $\sqrt{x^2+y^2}$ and then transforms it into a format the web browser can display properly, such as $a+b$ or $\sqrt{x^2+y^2}$.

The workflow is then as follows:

  1. Write the posts in Textile markup mixed with standard LaTeX code for mathematical expressions.
  2. Use Jekyll to generate static HTML files that still contain the LaTeX code snippets unchanged.
  3. Publish the static HTML files.
  4. Use MathJax to render the LaTeX code snippets properly, when the web page is displayed in a web browser.

The advantage of this approach is that, aside from including a link to the MathJax script in your page, you only need to employ a single tool, such as Jekyll, to publish your blog. Moreover the combination of Textile and LaTeX markup is surprisingly easy on the eye. In many ways, I find it more pleasing then plain LaTeX. It is even possible to construct theorem-like environment using Textile, without having to embed HTML or write custom code.

For example

Theorem. Let $\mu_1,\ldots,\mu_n$ be continuous probability measures on $\RR^n$. Let $\alpha_1,\ldots,\alpha_n\in[0,1]$. Let $f_1,\ldots,f_n:S^{n-1}\rar\RR^n$ be functions such that $\mu_i(H^{+}_{v,\sprod{v}{f_i(v)}})=\alpha_i$ for all $i\in[n]$ and all $v\in S^{n-1}$. The $f_i$ need not be continuous, but the $\Im f_i$ have to be bounded. If $\Im f_1,\ldots,\Im f_n$ can be separated by hyperplanes, then there exists a hyperplane $H$ such that $\mu_i(H^+)=\alpha_i$ for all $i\in[n]$.

is generated by the Textile+LaTeX snippet:

p(box). *Theorem.*   Let $\mu_1,\ldots,\mu_n$ be continuous probability measures on $\RR^n$. 
Let $\alpha_1,\ldots,\alpha_n\in[0,1]$.  Let $f_1,\ldots,f_n:S^{n-1}\rar\RR^n$ be functions 
such that $\mu_i(H^{+}_{v,\sprod{v}{f_i(v)}})=\alpha_i$ for all $i\in[n]$ and all $v\in S^{n-1}$. 
The $f_i$ need not be continuous, but the $\Im f_i$ have to be bounded. 
If $\Im f_1,\ldots,\Im f_n$ can be separated by hyperplanes, then there exists a 
hyperplane $H$ such that $\mu_i(H^+)=\alpha_i$ for all $i\in[n]$.

Two things are interesting to note about this snippet. First of all box is a CSS class name. So a large part of the layout of the theorem environment can be cleanly encapsulated in a CSS stylesheet. This shows the versatility of Textile. Second, the above snippet contains custom LaTeX commands such as \RR, \rar, \Im or \sprod. These can be defined as usual via \newcommand or, as I vastly prefer, these can be encapsulated in JavaScript via:

      MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
        var TEX = MathJax.InputJax.TeX;
        TEX.Macro("RR","{\\mathbb{R}}");
        TEX.Macro("Im","{\\mathrm{Im}}");
        TEX.Macro("rar","{\\rightarrow}");
        TEX.Macro("sprod","{\\langle {#1}, {#2} \\rangle}",2);
      });

This shows just how powerful MathJax really is. If I had more time on my hands, I might almost be tempted to try and use these technologies to turn any web browser into a Textile+LaTeX editor with a built in “preview” functionality in the spirit of the venerable Emacs+AucTeX+preview-latex… A couple of years ago I put a lot of work into making the wonderful TeXmacs compatible with the world of XML. At that point, the idea of moving from LaTeX (or TeXmacs’ native file format) to a more web-oriented way of publishing and editing mathematics did not really catch on. Maybe the time is ripe for new innovations in this area.

Comments