CODEWITHSUNDEEP
javascriptmathjax
mike3996
mike3996

Reputation: 17537

Apply Mathjax to arbitrary elements

I have emacs org-generated HTML that contains dvipng'd equations by default. That's ok, I want to provide a good fallback for those who disabled their JS. The generated pictures and resulting <img> tags have complete LaTeX source in their alt attribute. I have also tweaked the code to apply a specific class to all such images so it becomes a simpler matter in JS end, which isn't my forté.

The MathJax documentation lists a couple of different configurations and a way to customize a configuration by myself; I don't see a selector function or anything to apply Mathjax to suit my needs. I know I can write own DOM-munging JS and then call Mathjax afterwards but surely Mathjax bends to this kind of functionality by itself?

This is an example from the generated HTML.

<img class="dvipng" src="upload/blog_ff4e604.png"
     alt="$\frac{1}{2\pi{}i}\int_C\frac{f'(z)}{f(z)}{\rm d}z = N_0(f)$">

Upvotes: 2

Views: 559

Answers (1)

Davide Cervone
Davide Cervone

Reputation: 12290

MathJax doesn't include this directly, but you could do the following:

<script type="text/x-mathjax-config">
MathJax.Extension.myImg2jax = {
  version: "1.0",
  PreProcess: function (element) {
    var images = element.getElementsByTagName("img");
    for (var i = images.length - 1; i >= 0; i--) {
      var img = images[i];
      if (img.className === "dvipng") {
        var script = document.createElement("script"); script.type = "math/tex";
        var match = img.alt.match(/^(\$\$?)(.*)\1/);
        if (match[1] === "$$") {script.type += ";mode=display"}
        MathJax.HTML.setScript(script,match[2]);
        img.parentNode.replaceChild(script,img);
      }
    }
  }
};
MathJax.Hub.Register.PreProcessor(["PreProcess",MathJax.Extension.myImg2jax]);
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

which defines a new preprocessor that looks for your images and extracts the math from the ALT tags. This assumes you use $...$ for in-line math and $$...$$ for displayed math.

This code removed the image when it converts it to the MathJax <script> tag. It would be possible to move the image to a preview span where it will show up until MathJax processes the TeX code. That is a bit more sophisticated, but could be done with a little more work. I'll leave that to the interested reader. :-)

Upvotes: 3

Related Questions