Tuesday, December 22nd, 2009

MathJax: Rich Math display from LaTeX and MathML

Category: JavaScript

I am sure MathML took off somewhere, but I never really saw it. MathJax seems to have a chance at being a practical solution that offers a high quality display of LaTeX and MathML math notation in HTML pages.

You can embed the following LaTeX right in your page:

  1. <p>The Lorenz Equations</p>
  2. \[\begin{matrix}
  3. \dot{x} & = & \sigma(y-x) \\
  4. \dot{y} & = & \rho x - y - xz \\
  5. \dot{z} & = & -\beta z + xy
  6. \end{matrix} \]
  8. <p>The Cauchy-Schwarz Inequality</p>
  10. \[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]
  12. <p>A Cross Product Formula</p>
  14. \[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
  15. \mathbf{i} & \mathbf{j} & \mathbf{k} \\
  16. \frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\               \frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
  17. \end{vmatrix}  \]
  19. <p>The probability of getting \(k\) heads when flipping \(n\) coins is: </p>
  21. \[P(E)   = {n \choose k} p^k (1-p)^{ n-k} \]
  23. <p>An Identity of Ramanujan</p>
  24. \[ \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
  25. 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
  26. {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

and then you get the following output:


It has some cool features like math accessibility, cut and paste interoperability and an API for integration.

In fact, take a peak at the source code for MathJax. Interesting to see.


MathJax grew out of the popular jsMath project, an earlier Ajax-based math rendering system developed by Davide Cervone in 2004. In the intervening time, there have been many significant developments relevant for web publication of mathematics: consolidation of browser support for CSS 2.1, Web Font technology, adoption of math accessibility standards, and increasing usage of XML workflows for scientific publication. Consequently, Cervone and others are designing and developing MathJax from the ground up as a “next-generation” platform, while still benefiting from the extensive real-world experience gained from jsMath.

Posted by Dion Almaer at 6:44 am

4.5 rating from 42 votes


Comments feed TrackBack URI

Now that is some seriously cool stuff! Gosh, I wish I had that back in college (was a math major).

Comment by quantum00 — December 22, 2009

Interesting, but does not work on Firefox 3.5.6 (LINUX)

Comment by SleepyCod — December 23, 2009

Very impressive. And all done with real text! Wow.

I like that they’ve used a jack in their logo :)

Comment by Skilldrick — December 23, 2009

Wow, at first I assumed this was like that silly jQuery plugin that called out to a web service to do the rendering, but MathJax actually uses JavaScript to generate properly formatted text. Impressive.

Comment by tlrobinson — December 25, 2009

Leave a comment

You must be logged in to post a comment.