Typesetting Equations in Web Pages with MathJax

One blog feature that should have influenced my choice of blogging platform is the ability to typeset equations. In this imperfect world, I didn't think that far ahead, so I chose Blogger out of familiarity with Google's ways, and for the convenience of having created an account in 2011 that's lain dormant until recently. Fortunately, the equation-writing solution that I test in this post should work for just about any web document out there.

I'm sporadically active on the Astronomy Picture of the Day (APOD) forums, where discussion occasionally spirals into the astrophysical realm and waxes technical. That's where I first encountered the need to typeset equations online. I resorted to a quick and dirty solution:

1. Decide whether laziness trumps steps 2-4.
2. Use a LaTeX-to-image converter such as LaTeXiT to generate equation images.
3. Upload images to university webspace.
4. Embed images inline with text.

LaTeX is a mathematical markup language that's as common and useful in research circles as actual latex is in meatspace. There's a lot of general information out there about LaTeX, so here, I'll just focus on getting it to work in Blogger posts. At the risk of overstretching the bizarre dating/relationship theme that seems to pervade everything I write, introducing LaTeX on the second date post demonstrates the unrealistic optimism that it'll actually come in handy so the user won't have to. Okay, fun's over: it's pronounced LAH-tek or LAY-tek, probably in reference to the last name of LaTeX's creator, Leslie Lamport. (But how is that pronounced...?)

A cursory web search identified MathJax as the most magic-like way to type posts in LaTeX and see equations across all major browsers. I'd heard of MathML before, but since I'm so used to LaTeX already, MathJax looked way too easy to pass up, and it is. All the end user needs to do is to include the MathJax JavaScript library in their HTML via the following snippet [per official instructions]:

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

(That's the secure snippet, which imports the script over HTTPS. An HTTP variant is provided through the above official instructions link for those who'd rather flirt with men in the middle.)

After embedding the above script in your HTML, everything should be hunky dory. Hack up some LaTeX in your HTML view; the default math delimiters for inline and paragraph equations are $$...$$ and \[...\]. So, this string:

\[ \nabla \times \mathbf E = - \frac{\partial \mathbf B}{\partial t} \] 

gives you this:
\[ \nabla \times \mathbf E = - \frac{\partial \mathbf B}{\partial t} \]
Huge thanks go out to the MathJax team, and to you, dear reader, for reading all the way to the end of this healthcare.gov of a post. Until next time!

tl;dr: including a MathJax script in your web page lets you type LaTeX directly in HTML.