Making Mathjax work with Cloudflare

It seems that there is a bit of a problem with using Mathjax and Cloudflare, for some reason the math does not render at all, even when using the Mathjax from cdnjs (Cloudflare's own CDN).

Searching around I found a post at the vxlabs1 site, that indicated that the problem could be fixed changing the performance settings in Cloudflare.

So I went to my Cloudflare account and tried changing to a couple of CDNs (Mathjax's and Cloudflarer's) with the general settings "CDN + Basic Optimization" and "CDN + Full Optimization", all without much success, even tried setting Mathjax to output SVG instead of HTML+CSS, but no luck there either.

Looked then at the individual settings, and when I turned off the "Rocket Loader"™ setting and cleaned up the cache, everything started working again. (There is a better way, see update below)

Let's test this with equations from my ancient Ph.D. thesis:

I = \chi_{Zn} I_{0}^{ZnL} + (1 - \chi_{Zn}) I_{0}^{CdL}
\chi_{Zn} = \left( [Zn^{+2}] \over {[Zn^{+2}] + [Cd^{+2}]} \right)
\theta = m[Zn^{+2}] + b

First update (2014-10-28): Actually I found a better way, reading the documentation2 for Cloudflare's "Rocket Loader"™, which describes a way to tell their system not to touch some JS resources. Once I added the appropriate attribute to the Mathjax related tags, it all started working even with "CDN + Full Optimization" settings.

Second update (2014-10-29): While I got math to work, it was not optimal to have to manually exclude libraries. So I tried \KaTeX3 and ended up moving the few posts I got with math in them to use that lib instead. So far, no problem with Cloudflare even with "Full Optimization". Of course is not as full featured as Mathjax, but for my simple needs, it is fine. The code above now is being rendered using that library.

  1. See the detailed description of deactivating "Rocket Loader"™ to get Mathjax to work in the post titled "CloudFlare full optimizations break MathJax" at the vxlabs site. 

  2. Basically the option is to tell "Rocket Loader"™ not to touch some of the JS, as described in "How can I have Rocket Loader ignore my script(s) in Automatic Mode?

  3. More info at the \KaTeX site 

Go Top