Reveal.js: MathJax 3.x compatibility issue

[wirepatch]

MathJax 2.x uses URL configuration parameters e.g.:

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_CHTML

In current 3.x this dispatch mechanism has been superseeded using e.g.:

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js

MathJax.js is no longer present in 3.x. This works using the reveal MathJax plugin e.g.:

math: {
    mathjax: 'mathjax/tex-mml-svg.js',
    config: 'x' // Obsolete dummy value.
}

However using »Inspect« Chromium shows the following JavaScript error:

math.js:71 Uncaught TypeError: Cannot read property 'Config' of undefined
    at math.js:71
    at HTMLScriptElement.finish (math.js:43)

Omitting config: 'x' completely does not help either.

Technically it's a mere nuisance. But if you are chasing for errors this one is confusing. Making »config« an option rather than a mandatory property would help.

[burgerga]

MathJax 3 support would be nice, but it would require almost a complete rewrite of https://github.com/hakimel/reveal.js/blob/master/plugin/math/math.js

(based on your comment I hoped there would be an easy workaround, but unfortunately not 😞)

Trying to use Mathjax 3 (also with the config: 'x' trick) breaks most (but not all) of my equations.
The reason is that Mathjax v3 is loaded and configured differently than v2 (compare http://docs.mathjax.org/en/v2.7-latest/configuration.html and http://docs.mathjax.org/en/latest/web/start.html), that is why you get this

math.js:71 Uncaught TypeError: Cannot read property 'Config' of undefined
    at math.js:71
    at HTMLScriptElement.finish (math.js:43)

error, which means that most of the plugin is not working (i.e. none of the options are applied and the reveal event listener is not added). Additionally, v3 doesn't use queues so that part needs to be rewritten as well.

EDIT: rewrote the plugin, will prepare a pull request, but I'll also paste it below tomorrow

[burgerga]

Instead of overwriting the current plugin, I made a new one, because at the moment there are still some issues with MathJax 3 (I encountered newlines not working and under/over braces not working), so if you want to change back to MathJax 2 just enable the other plugin again.

Save the following as plugins/math3/math3.js, then change your index.html to load this plugin. You need math3 in your options to customize it.

/**
 * A plugin which enables rendering of math equations inside
 * of reveal.js slides. Essentially a thin wrapper for MathJax 3
 *
 * @author Hakim El Hattab
 * @author Gerhard Burger
 */
var RevealMath3 = window.RevealMath3 || (function(){

    var options = Reveal.getConfig().math3 || {};
    var mathjax = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
    var url = mathjax;

    var defaultOptions = {
        tex: {
            inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ]  ]
        },
        options: {
            skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
        },
        startup: {
            ready: () => {
                MathJax.startup.defaultReady();
                MathJax.startup.promise.then(() => {
                    Reveal.layout();
                });
            }
        }
    };

    function defaults( options, defaultOptions ) {

        for ( var i in defaultOptions ) {
            if ( !options.hasOwnProperty( i ) ) {
                options[i] = defaultOptions[i];
            }
        }

    }

    function loadScript( url, callback ) {

        var script = document.createElement( 'script' );
        script.type = "text/javascript"
        script.id = "MathJax-script"
        script.src = url;
        script.async = true

        // Wrapper for callback to make sure it only fires once
        var finish = function() {
            if( typeof callback === 'function' ) {
                callback.call();
                callback = null;
            }
        }
        script.onload = finish;

        document.head.appendChild( script );


    }

    return {
        init: function() {

            defaults( options, defaultOptions );
            defaults( options.tex, defaultOptions.tex );
            defaults( options.options, defaultOptions.options);
            defaults( options.startup, defaultOptions.startup );
            options.mathjax = null;
            window.MathJax = options;

            loadScript( url, function() {
                // Reprocess equations in slides when they turn visible
                Reveal.addEventListener( 'slidechanged', function( event ) {
                    MathJax.typeset();
                } );
            } );

        }
    }

})();

Reveal.registerPlugin( 'math3', RevealMath3 );

[wirepatch]

Cheers, Martin

Am 16. Mai 2020 10:31:58 MESZ schrieb Gerhard Burger [e-mail]:

Instead of overwriting the current plugin, I made a new one, because at
the moment there are still some issues with MathJax 3 (I encountered
newlines not working
and under/over braces not
working), so if you
want to change back to MathJax 2 just enable the other plugin again.

Save the following as plugins/math3/math3.js, then change your
index.html to load this plugin. You need math3 in your options to
customize it.

/**
* A plugin which enables rendering of math equations inside
* of reveal.js slides. Essentially a thin wrapper for MathJax 3
*
* @author Hakim El Hattab
* @author Gerhard Burger
*/
var RevealMath3 = window.RevealMath3 || (function(){

  var options = Reveal.getConfig().math3 || {};
  var mathjax = options.mathjax ||
'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
  var url = mathjax;

  var defaultOptions = {
      tex: {
          inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ]  ]
      },
      options: {
          skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
      },
      startup: {
          ready: () => {
              MathJax.startup.defaultReady();
              MathJax.startup.promise.then(() => {
                  Reveal.layout();
              });
          }
      }
  };

  function defaults( options, defaultOptions ) {

      for ( var i in defaultOptions ) {
          if ( !options.hasOwnProperty( i ) ) {
              options[i] = defaultOptions[i];
          }
      }

  }

  function loadScript( url, callback ) {

      var script = document.createElement( 'script' );
      script.type = "text/javascript"
      script.id = "MathJax-script"
      script.src = url;
      script.async = true

      // Wrapper for callback to make sure it only fires once
      var finish = function() {
          if( typeof callback === 'function' ) {
              callback.call();
              callback = null;
          }
      }
      script.onload = finish;

      document.head.appendChild( script );


  }

  return {
      init: function() {

          defaults( options, defaultOptions );
          defaults( options.tex, defaultOptions.tex );
          defaults( options.options, defaultOptions.options);
          defaults( options.startup, defaultOptions.startup );
          options.mathjax = null;
          window.MathJax = options;

          loadScript( url, function() {
              // Reprocess equations in slides when they turn visible
              Reveal.addEventListener( 'slidechanged', function( event ) {
                  MathJax.typeset();
              } );
          } );

      }
  }

})();

Reveal.registerPlugin( 'math3', RevealMath3 );

--
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
https://github.com/hakimel/reveal.js/issues/2559#issuecomment-629609465

--
Earth is flat, pigs can fly and nuclear power is efas

[burgerga]

@hakimel I was planning to prepare a pull request, but I see that you want plugins in a separate repository. Is it ok if I create a separate repository for this or do you want to update the math plugin in this repository?

From https://docs.mathjax.org/en/latest/upgrading/v2.html:

MathJax v3 is a complete rewrite of MathJax from the ground up (see What’s New in MathJax v3.0), and so its internal structure is quite different from that of version 2. That means MathJax v3 is not a drop-in replacement for MathJax v2, and upgrading to version 3 takes some adjustment to your web pages.

and

MathJax v3 is still a work in progress; not all features of version 2 have been converted to version 3 yet, and some may not be. MathJax v2 will continue to be maintained as we work to move more features into version 3, but MathJax v2 likely will not see much further development, just maintenance, once MathJax v3 is fully converted.

So it might be smart to keep the plugins separate for a while?

[hakimel]

I think it's best to create a new plugin in a separate repo. Thanks for asking.

On a related note I've been considering switching the math plugin over to KaTeX instead. From a developer point of view, I've found that easier to work with (we use it in slides.com). Mostly an FYI but if anyone has input I'm all ears :)

[burgerga]

Thanks for your quick reply, will create a separate repo then.
Never used KaTeX, but I'll have a look! (saw that there was already a plugin: https://github.com/j13z/reveal.js-math-katex-plugin/, but it hasn't been updated in 3 years)

[burgerga]

@hakimel Experimented a bit with KaTeX and it's quite easy to get it to work and quite fast indeed, thanks for the tip! So I was thinking: is it maybe an idea to create a reveal.js-math repo? Then you can have MathJax 2, MathJax 3, and KaTeX side-by-side, and have the documentation for general math stuff still in one place (for example, to point out differences between the three, and where you can explain the need for event bindings to the Reveal 'ready' event).

[hakimel]

Still thinking about the best way to go about this. Maintaining three separate plugins seems like extra work. If KaTeX has the features people need, then I'd rather just switch to a single 'math' plugin powered by KaTeX.

The existing KaTeX plugin hasn't been updated in a while but maybe we can use that as a starting point: https://github.com/j13z/reveal.js-math-katex-plugin/

[burgerga]

Yes, I see your point... Maybe I'll dump the MathJax 3 plugin code somewhere "as-is".
I browsed through this existing KaTeX plugin, but it seems unnecessarily complex (but maybe that was needed at the time, I don't know), I propose a much simpler plugin using the katex autorenderer script, what do you think?

EDIT: outdated code removed, see pull request below

[hakimel]

Thanks for sharing @burgerga!

I've added switching to KaTeX to the v4.1 todo-list so it's super helpful to see an implementation of it.

[burgerga]

No problem, also seems to work fine for 4.0.0 (after I adapted it to the
new plugin infrastructure), I can prepare a pull request against the dev
branch if you want... Very nice work on 4.0.0 by the way!

On Wed, May 20, 2020, 19:34 Hakim El Hattab [e-mail]
wrote:

Thanks for sharing @burgerga https://github.com/burgerga!

I've added switching to KaTeX to the v4.1 todo-list so it's super helpful
to see an implementation of it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/hakimel/reveal.js/issues/2559#issuecomment-631619666,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAG5QYVBHRZVYRP5OHU3T6LRSQIBRANCNFSM4KCWVFXA
.

[hakimel]

Yes please, I'd love a pull request that replaces the existing math plugin with your KaTeX version.

Once that's in, I'll move the old math plugin to a separate repo so that remains available for people who want to keep using MatJax 2.

[rodrigoalcarazdelaosa]

Just to leave my two cents here. I'm currently using the Academic theme for Hugo, which uses reveal.js for its slides feature.

Academic uses MathJax v3 with a feature that allows me to use some commands only available through extensions (such as \cancel, which implements some of the features of the cancel package of LaTeX), without having to load anything myself (I guess it has to do with the autoload extension, but haven't figured it out yet).

I noticed that the \cancel command does not work with reveal.js, which is something I'm really missing (I'm planning on using slides for guiding my students through different processes, and cancelling numbers and/or units may be useful).

I don't know if KaTeX has something similar (never used it myself) but I'd be willing to have that feature.

Thanks in advance!

[rodrigoalcarazdelaosa]

Academic uses MathJax v3 with a feature that allows me to use some commands only available through extensions (such as \cancel, which implements some of the features of the cancel package of LaTeX), without having to load anything myself (I guess it has to do with the autoload extension, but haven't figured it out yet).

I forgot to mention mhchem as well, to write chemical equations, but I see it also has a version for KaTeX 😉.

[burgerga]

I don't have any experience with Hugo, but mhchem and cancel, should work with MathJax 3 and KaTeX.

mhchem might be a bit harder to get to work with the Reveal math (katex) plugin since it needs te be loaded after katex.js. I will have a look if this is easy to add.
For the time being it is also possible to skip the Reveal math plugin, and load katex using the instructions from https://katex.org/docs/autorender.html#usage, and then add in the mhchem script in the appropriate place.

[burgerga]

@rodrigoalcarazdelaosa Just updated the pull request, the plugin now allows easy enabling of mhchem!