Attention

Version 3 is now the current version of MathJax. This document is for version 1.

Loading MathJax Dynamically

MathJax is designed to be included via a <script> tag in the <head> section of your HTML document, and it does rely on being part of the original document in that it uses an onload event handler to synchronize its actions with the loading of the page. If you wish to insert MathJax into a document after it has been loaded, that will normally occur after the page’s onload handler has fired, and so MathJax will not be able to tell if it is safe for it to process the contents of the page. Indeed, it will wait forever for its onload handler to fire, and so will never process the page.

To solve this problem, you will need to call MathJax’s onload handler yourself, to let it know that it is OK to typeset the mathematics on the page. You accomplish this by calling the MathJax.Hub.Startup.onload() method as part of your MathJax startup script. To do this, you will need to give MathJax an in-line configuration.

Here is an example of how to load and configure MathJax dynamically:

(function () {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src  = "http://cdn.mathjax.org/mathjax/latest/MathJax.js";

  var config = 'MathJax.Hub.Config({' +
                 'extensions: ["tex2jax.js"],' +
                 'jax: ["input/TeX","output/HTML-CSS"]' +
               '});' +
               'MathJax.Hub.Startup.onload();';

  if (window.opera) {script.innerHTML = config}
               else {script.text = config}

  document.getElementsByTagName("head")[0].appendChild(script);
})();

You can adjust the config variable to your needs, but be careful to get the commas right. The window.opera test is because some versions of Opera don’t handle setting script.text properly, while Internet Explorer doesn’t handle setting the innerHTML of a script tag.

Here is a version that uses the config=filename method to configure MathJax:

(function () {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src  = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full";

  var config = 'MathJax.Hub.Startup.onload();';

  if (window.opera) {script.innerHTML = config}
               else {script.text = config}

  document.getElementsByTagName("head")[0].appendChild(script);
})();

Note that the only reliable way to configure MathJax is to use an in-line configuration block of the type discussed above. You should not call MathJax.Hub.Config() directly in your code, as it will not run at the correct time — it will either run too soon, in which case MathJax may not be defined and the function will throw an error, or it will run too late, after MathJax has already finished its configuration process, so your changes will not have the desired effect.

MathJax and GreaseMonkey

You can use techniques like the ones discussed above to good effect in GreaseMonkey scripts. There are GreaseMonkey work-alikes for all the major browsers:

Note, however, that most browsers don’t allow you to insert a script that loads a file:// URL into a page that comes from the web (for security reasons). That means that you can’t have your GreaseMonkey script load a local copy of MathJax, so you have to refer to a server-based copy. The MathJax CDN works nicely for this.

Here is a script that runs MathJax in any document that contains MathML (whether it includes MathJax or not). That allows browsers that don’t have native MathML support to view any web pages with MathML, even if they say it only works in Firefox and IE+MathPlayer.

// ==UserScript==
// @name           MathJax MathML
// @namespace      http://www.mathjax.org/
// @description    Insert MathJax into pages containing MathML
// @include        *
// ==/UserScript==

if ((window.unsafeWindow == null ? window : unsafeWindow).MathJax == null) {
  if ((document.getElementsByTagName("math").length > 0) ||
      (document.getElementsByTagNameNS == null ? false :
      (document.getElementsByTagNameNS("http://www.w3.org/1998/Math/MathML","math").length > 0))) {
    var script = document.createElement("script");
    script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full";
    var config = 'MathJax.Hub.Startup.onload()';
    if (window.opera) {script.innerHTML = config} else {script.text = config}
    document.getElementsByTagName("head")[0].appendChild(script);
  }
}

Source: mathjax_mathml.user.js

Here is a script that runs MathJax in Wikipedia pages after first converting the math images to their original TeX code.

// ==UserScript==
// @name           MathJax in Wikipedia
// @namespace      http://www.mathjax.org/
// @description    Insert MathJax into Wikipedia pages
// @include        http://en.wikipedia.org/wiki/*
// ==/UserScript==

if ((window.unsafeWindow == null ? window : unsafeWindow).MathJax == null) {
  //
  //  Replace the images with MathJax scripts of type math/tex
  //
  var images = document.getElementsByTagName('img'), count = 0;
  for (var i = images.length - 1; i >= 0; i--) {
    var img = images[i];
    if (img.className === "tex") {
      var script = document.createElement("script"); script.type = "math/tex";
      if (window.opera) {script.innerHTML = img.alt} else {script.text = img.alt}
      img.parentNode.replaceChild(script,img); count++;
    }
  }
  if (count) {
    //
    //  Load MathJax and have it process the page
    //
    var script = document.createElement("script");
    script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full";
    var config = 'MathJax.Hub.Startup.onload()';
    if (window.opera) {script.innerHTML = config} else {script.text = config}
    document.getElementsByTagName("head")[0].appendChild(script);
  }
}

Source: mathjax_wikipedia.user.js