App/Xtn/Mediawiki/Math/MathJax

Credits

Considerable thanks goes to Schnark for proposing and implementing the MathJax integration.

Setup notes

The following is a list of setup notes for MathJax:

• Get latest of Math Extension: http://www.mediawiki.org/wiki/Extension:Math or https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/Math.git;a=snapshot;h=refs/heads/master;sf=tgz
• Unzip to /xowa/bin/any/javascript/xowa/mathjax_temp/. When you are done you should have /xowa/bin/any/javascript/xowa/mathjax_temp/Math.php and many other files
• Move /xowa/bin/any/javascript/xowa/mathjax_temp/modules/Mathjax to /xowa/bin/any/javascript/xowa/mathjax/. When you are done you will have a file called /xowa/bin/any/javascript/xowa/mathjax/Mathjax.js as well as many others. (We basically want to ignore everything except for the inner modules/Mathjax directory)
• Edit the following file: /xowa/bin/any/javascript/xowa/mathjax/extensions/wiki2jax.js

replace this:

    $('span.tex, img.tex', element || document).each(function(i, span) {
        that.ConvertMath(span);
    });

with this:

    var math = document.querySelectorAll('[id^="xowa_math_txt"]');
    for (var i = 0; i < math.length; i++) {
       that.ConvertMath(math[i]);
    }

• In the same file:

replace this:

tex = $(node).text().replace(/^\$/,"").replace(/\$$/,"");

with this:

tex = node.textContent.replace(/^\$/,"").replace(/\$$/,""); //patched for XOWA

• Create a text file at /xowa/bin/any/javascript/xowa/mathjax/xowa_mathjax.js and add the following

  document.addEventListener( "DOMContentLoaded", function(){
  var math = document.querySelectorAll('[id^="xowa_math_txt"]');
  if (math.length) {
  window.mathJax_Config = function () {
    MathJax.Hub.Config({
    root: window.xowa_root_dir + 'bin/any/javascript/xowa/mathjax',
    config: ["TeX-AMS-texvc_HTML.js"],
    "v1.0-compatible": false,
    styles: { ".mtext": { "font-family": "sans-serif ! important", "font-size": "80%" } },
    displayAlign: "left",
    menuSettings: { zoom: "Click" },
    "HTML-CSS": { imageFont: null, availableFonts: ["TeX"] }
    });
    MathJax.OutputJax.fontDir = window.xowa_root_dir + 'bin/any/javascript/xowa/mathjax/fonts';
  }
  
    var config = 'mathJax_Config();',
      script1 = document.createElement( 'script' ),
      script2 = document.createElement( 'script' );
    script1.setAttribute( 'type', 'text/x-mathjax-config' );
    script1.text = config;
    document.getElementsByTagName('head')[0].appendChild( script1 );
  
    script2.setAttribute( 'src', window.xowa_root_dir + 'bin/any/javascript/xowa/math/mathjax/MathJax.js?config=default' );
    document.getElementsByTagName('head')[0].appendChild( script2 );  
  }
  }, false );

• Change "menuSettings:" in /xowa/bin/javascript/xowa/math/mathjax/config/default.js
  • add 'renderer: "SVG"'
  • change 'texHints: false'

Example

  menuSettings: {
    renderer: "SVG", //  XOWA: manually specify SVG b/c HTML/CSS fails with "Can't Load Web Font TeX/Math/Italic"
    texHints: false  //  XOWA: include class names for TeXAtom elements; changed from true to false, b/c it sometimes crashes XOWA
  },

Note that xowa_mathjax.js will use the config since it calls '/MathJax.js?config=default'

• Change "blacker" from 10 to 1 b/c 1 looks closer to the HTML/CSS renderer and 10 looks too "blocky"

    blacker: 1, // XOWA: changed from 10 to 1 b/c 1 looks closer to the HTML/CSS renderer and 10 looks too "blocky"

• Embed this in the xowa.gfs file (XOWA does this through ~{math_mathjax_script})

   <script src="file:///xowa/bin/any/javascript/xowa/mathjax/xowa_mathjax.js"></script>