Monday, February 15, 2016

Pandoc MathJax Self-contained

If you've ever used MathJax, you've probably noticed that for everything it does it injects script tags w/ various modules, loads fonts on-demand, etc. This is the reason for why pandoc, for example, is unable to produce a truly stand-alone .html file w/ MathJax, where all formulas are pre-rendered or rendered on-the-fly but w/o any external requests.

At 1st I've tried to monkey patch MathJax.Ajax.Require() for dependency discovery & have generated 1 big file w/ all the required modules for PreviewHTML output format, like:

<% nm = ENV['MATHJAX_SRC'] || "node_modules/mathjax" -%>
<%= File.join nm, "MathJax.js" %>
<%= File.join nm, "jax/input/TeX/config.js" %>

It worked, served its purpose, but was a rough piece of horseplay.

What I really wanted is something like `pandoc -t html5 -o - | mathjax-embed` that would dump a pre-rendered html suitable for the offline use.

Then I remembered that we can always render html (w/ the mathjax script tag) in phantomjs and save the modified DOM. The process should be quite simple: load html, inject a peace of JS w/ the mathjax config, inject a script tag w/ src=mathjax-entry-point, wait until it finishes transforming DOM, print.

Here is a small phantomjs-script that does that:

Here is a rendered example (no JS required & no external resources).

1 caveat: it doesn't embed fonts, thus CommonHTML & HTML-CSS mathjax output formats won't look good. But it works fine for SVG & PreviewHTML ones.

No comments:

Post a Comment