A metalsmith plugin to prerender mathematical equations

January 10, 2016 | |Source Code

I recently used MathJax for the first time to dynamically render equations in a post using the LaTeX format. The MathJax documentation recommends loading the script that converts the LaTeX format to beautifully formated math equations asynchronously. It works great, but there's typically a lag where a user sees the raw, ugly LaTeX for about a second before it gets rendered.

For example, users would momentarily see this:

$$x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}$$

Before it was rendered as:

x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}

There's also a decent amount of Javascript overhead when you load MathJax—understandably, since it's such a powerful tool. So I wrote a simple plugin to render the LaTex as SVG using the server-side implementation MathJax-node. Thus, if you view the source for this page, you'll see the formatted version of the quadratic equation as a hard-coded SVG, eliminating the need to load the MathJax Javascript files.

It can handle single-dollar sign inline equations as well: $\bot(x)$ in your source file is pre-rendered as \bot(x) during the build.

The plugin uses jsdom, which for me is throwing some non-fatal errors during the build. Right now it's a zero-config plugin, but happy to take suggestions for improvement.