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.

Martinemartineau

I am not clear as to what you are asking for. The only way to get MathJax is in a script tag. Can you elaborate? – Medrano

How to load it without the website doing it via a browser plug-in, e.g. - or any other means there might be. – Martinemartineau

If you are not able to load script elements, you are not going to be able to load a flash or java control. If you mean browser extension, then you can just load a script file. – Medrano

Well - that is a motherhood statement. The question is: How exactly? Which plugin, if any, ... – Martinemartineau

Sorry - I am not intending to be obvious. I am not clear on how to help because I am not sure what you mean by a plugin. If you mean a browser extension, then there would be no change from loading any other script file. You would just include the normal mathjax js lib in your extensions dependencies. If you mean a browser plugin as in flash, activex, java, etc - then I am not sure how you intend to load one of those and not be able to load a normal script tag. Can you elaborate on your question so I can help more? – Medrano

It is all about wanting to get MathJax-formula-rendering in Wikipedia, which they recently disabled. By which means this feat might be feasible – Martinemartineau

You will not be able to add your own plugin to Wikipedia. period. – Medrano

@Patrick: You are still missing the whole point: I do not want to enter something into Wikipedia, but add something to the client side (aka browser) processing, in order to get formulae rendered the way I would like it to be. This is exactly what I asked for in my question, and I also stressed the fact, that it is a client-side solution I am looking for. – Martinemartineau

In the meantime, I came to the conclusion, that something along the lines of the Greasemonkey plugin for Firefox might be a viable component in working around MediaWiki's stubbornness. – Martinemartineau

So... they removed the only option that worked well and looked good? – Inadvisable

@endolith: Yes, just that. But there is a fix (see below). :) – Martinemartineau

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).

Tjon

Wonderful! Thanks a lot! finally, I have appropriately rendered formulae back. This is a great relieve! – Martinemartineau

Thanks for this! I personally prefer using 'cdn.mathjax.org/mathjax/latest/…', in the second to last line, which renders as SVG. I believe this is what Wikipedia used to use with MathJax, if anyone would like to use this. This doesn't have the "click equation to pop out a zoomed in version," but otherwise looks similar. – Partitive

There will be an optimized combined configuration file in the next MathJax release for MathML input and SVG output. – Tjon

I've updated the answer since cdn.mathjax.org is nearing its end-of-life, see check mathjax.org/cdn-shutting-down – Tjon

Is there a way to see what scripts you have, if you used a different name than common.js? – Circumrotate

I'm afraid I don't know the answer to that. – Tjon

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);

Sorehead