learning-unlimited/ESP-Website — pull request #330 by aseering (2012-04-06 15:34:57+00:00)
Title: Replace "|teximage", "|smartypants" templatetags with JavaScript.

This is a request-for-comment as much as a request to pull this code onto main. I'm not certain that we want this functionality, but I see some significant advantages.

----------

The teximage templatetag took a block of text, found any text enclosed by "$$ ... $$", ran it through a LaTeX template that rendered it in math mode, and replaced a text with an tag pointing at the resulting PNG. This let users embed math into pages. However, the result was an un-scalable .png file, and a bunch of server load (only O(1) load to render, but the content had to be re-parsed on every page load).

I've removed the templatetag and all references to it, and added a link to load MathJax from a CDN on every page in the site. MathJax is a JavaScript-based LaTex Math renderer. It imposes no server load, seems to render all the LaTeX in the MIT Splash 2011 catalog quite nicely, and has the added advantage of rendering using real fonts and whatnot so it scales nicely and you can at least attempt to copy&paste bits of it.

MathJax does have the disadvantage that it takes some amount of time to load up and to render, particularly on browsers that don't properly support MathML. (Which apparently includes Firefox-latest these days, according to the MathML dev team...)

While I was at it, I replaced "|smartypants" with jsPrettify, which does the same thing (automatic smart quotes and em/en-dashes) but in JavaScript. Unlike MathJax, jsPrettify is not automatically site-wide; to make it apply (recursively) within a given div or other tag, add "class='prettify'" to that tag.