MediaWiki removed MathJax. Can MathJax be forced on client side another way?

Question

Much to my displeasure, MediaWiki has recently disabled support for MathJax (ticket: T99369) rendering of TeX formulae wikipedia-wide.

Since me (and others, if you skim the ticket's discussion thread) find the rendering with the remaining options (MathML, PNG) inferior, I would like to "slipstream" MathJax into Wikipedia.

Since loading further JavaScript files directly via the custom JavaScript settings in Wikipedia does not seem possible using <script> elements, I am at a loss on how to achieve this feat. Would it be, MathJax could be included via CDN most easily.

I am using current Edge and Firefox browsers, so any solution working with one or both of them would be greatly appreciated!

---

Meanwhile, I found Greasemonkey for Firefox, which might be able to accomplish this, given a suitable script. Since I am neither a Greasemonkey-, nor a JavaScript-expert, any hint on how to proceed to write such a script would be helpful.

Answer 1

As a registered user, you can do the following:

Under user preferences => appearance, switch on the "MathML with SVG or PNG fallback" mode. (The other two modes require a slightly different script but imho that mode is the best option right now.)

Next edit your user specific scripts page at https://en.wikipedia.org/wiki/User:YOURHANDLE/common.js [Don't forget to change user name!] and add the following custom script to it:

// add to User:YOURNAME/common.js to get smooth MathJax rendering
var mathTags = $('.mwe-math-mathml-a11y');
if (mathTags.length > 0){ //only do something when there's math on the page
  window.MathJax = { //hook into MathJax's configuration
    AuthorInit: function () {
      MathJax.Hub.Register.StartupHook("End",function () { //when MathJax is done...
        MathJax.Hub.Queue(
            function(){
             mathTags.removeClass('mwe-math-mathml-a11y'); // .. make the span around MathML (now MathJax output) visible
             $('.mwe-math-fallback-image-inline').addClass('mwe-math-mathml-a11y'); //hide fallback images
            }
        );
      });
    }
  };
  mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=MML_HTMLorMML-full');//load MathJax with a suitable combined config file
}

This script loads MathJax only when there's math in the page, renders it, and (when rendering its done) replaces the fallback images with the results.

This way, you have very little jitter. From a quick test this seems to work on Chrome 43, Firefox 39, IE8 and Edge, and WebKit 2.6.2 (so should work on Safari).

Answer 2

It appears that GreaseMonkey scripts to use client-side MathJax are now listed in the MathJax docs.

Updated from there:

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

// replace the images with MathJax scripts of type math/tex
if (window.MathJax) throw "MathJax already loaded!";
var imgs = document.querySelectorAll('.mwe-math-fallback-image-inline')
if (!imgs.length) throw "no matches!";
imgs.forEach((img) => {
    var script = document.createElement("script");
    script.type = 'math/tex';
    script[window.opera ? 'innerHTML' : 'text'] = img.alt;
    img.parentNode.replaceChild(script, img);
})
// Load MathJax and have it process the page
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.mathjax.org/mathjax/2.7-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full';
document.querySelector('head').appendChild(script);