2013-09-16

Beautiful Math On Your Website

A bit of a departure from Our Regularly Scheduled Program.  I know a lot of my readers aren't scientists and engineers, but who knows when this might come in handy!

This is a post of interest to anyone who wants to use nice-looking math on your blog or website.




How \(\LaTeX\) Does It


Chances are that you either know the LaTeX typesetting markup language, you're interested in learning it, or you've at least heard of it.  If you haven't learned yet, now's the time!  There is nothing better for generating beautifully-typeset documents in a highly portable, highly reusable, perfectly standardized format.

In LaTeX, there are a variety of convenient ways to typeset an equation.

The following ways yield an equation in-line with the text:

$\int_0^{\infty} \frac{1}{x} dx$
\(\int_0^{\infty} \frac{1}{x} dx\)
\begin{math}\int_0^{\infty} \frac{1}{x} dx\end{math}


The following ways yield a displayed equation, separate from the text:

\[\int_0^{\infty} \frac{1}{x} dx\]
\begin{displaymath}\int_0^{\infty} \frac{1}{x} dx\end{displaymath}
\begin{equation}\int_0^{\infty} \frac{1}{x} dx\end{equation}

Once you become familiar with the syntax, this is an intuitive way to handle equations.

In the past, you might have had to visit a site like this one, typeset your equation in LaTeX, output it as an image, and finally upload to your blog. Not exactly elegant.  No longer!


Enter: MathJax

MathJax is a JavaScript library that displays math in the browser.  Once installed in the site, it scans the page and typesets any equations it finds in LaTeX, MathML, or ASCIIMathML format.  A subset of the six syntax examples above are supported.



For inline math, delimit equations with \( and \)

\(\int_0^{\infty} \frac{1}{x} dx\)

\(\int_0^{\infty} \frac{1}{x} dx\)


For display math, delimit equations with $$, \[ and \], or \begin{equation} and \end{equation}

$$\int_0^{\infty} \frac{1}{x} dx$$

$$\int_0^{\infty} \frac{1}{x} dx$$

\[\int_0^{\infty} \frac{1}{x} dx\]

\[\int_0^{\infty} \frac{1}{x} dx\]

\begin{equation}\int_0^{\infty} \frac{1}{x} dx\end{equation}

\begin{equation}\int_0^{\infty} \frac{1}{x} dx\end{equation}

The following aren't currently supported

$\int_0^{\infty} \frac{1}{x} dx$

$\int_0^{\infty} \frac{1}{x} dx$

\begin{math}\int_0^{\infty} \frac{1}{x} dx\end{math}

\begin{math}\int_0^{\infty} \frac{1}{x} dx\end{math}

\begin{displaymath}\int_0^{\infty} \frac{1}{x} dx\end{displaymath}

\begin{displaymath}\int_0^{\infty} \frac{1}{x} dx\end{displaymath}


Typing \(\LaTeX\) markup without rendering it

Enter HTML editing mode and sandwich the markup with <code></code> for in-line LaTeX markup or <pre><code></code></pre> for blocks of preformatted markup.


Installation


The installation instructions are available here.  In Blogger, all you have to do is insert the following immediately after <head> in Settings → Template → Edit HTML:

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">

Check out the project homepage and the Wikipedia page for the full story.
I'll be adding some implementation details to the blog engineering page shortly.

Enjoy!