MathJax and Pelican

As you can see, I am using MathJax to display the math formulas in this website, and I find this is very nice, despite the time it can take for you to load it. The big advantage is that the formulas are really rendered closed to the visual style of $\LaTeX$, and are still text (you can select it as any text, it is just an HTML5/CSS rendering with appropriate fonts), and scalable. With a right-click on any formula, you have a menu to see for example the original code, or to zoom on the formula.

It was really easy to use it with Pelican, the static website generator I use: I just needed to follow the instructions in the documentation of MathJax as if it was a regular page, in the file base.html of the theme. I take here the opportunity to thank Alexis for this project, it is really easy to get started, you have really quickly some nice static html pages that you can browse locally.

The only problem I had at the beginning was a conflict due to the pygments CSS provided by the original theme, and the formulas appeared in green, excepted some of them. Finally here are the lines I added in the section of the file base.html:

<!-- Using MathJax, with the delimiters $ -->
<!-- Conflict with pygments for the .mo and .mi --> 
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
  "HTML-CSS": {
  styles: {
  ".MathJax .mo, .MathJax .mi": {color: "black ! important"}}
  },
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],processEscapes: true}
  });
  MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
      var VARIANT = MathJax.OutputJax["HTML-CSS"].FONTDATA.VARIANT;
      VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
      VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
      VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
      VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
      });
      MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () {
      var VARIANT = MathJax.OutputJax.SVG.FONTDATA.VARIANT;
      VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
      VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
      VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
      VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
      });
</script>

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

The only thing I have to do now is to escape all the backslashes with another backslash in my .rst files inside the formulas (not really convenient, but I think I will do a script to do that automatically). It seems that the way maths are written in ReST is far from reaching any consensus.

Crazily enough, the unicode characters I usually use work, and this is very convenient (even if maybe this is longer to load), I can just copy-paste my formulas from my $\LaTeX$ files.

Some exceptions: ⟦⟧ (not defined, need stmaryrd package), √(not working with an argument)…

EDIT on 2013-02-10: I added a bunch of lines in order to have MathJax in sans-serif. I found it here. As you can see on $\LaTeX≠\mathit\LaTeX$, this is just a kind of a hack, I hope one day it will be doable to have a decent sans-serif font working properly for all maths, in MathJax and in LaTeX…