MathJax 4 Support

examples/math.html

@@ -20,7 +20,7 @@
 
 				<section>
 					<h2>reveal.js Math Plugin</h2>
-					<p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
+					<p>Render math with KaTeX, MathJax 2, MathJax 3 or MathJax 4</p>
 				</section>
 
 				<section>
@@ -169,6 +169,7 @@ <h3>TeX Macros</h3>
 						\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
 						used in functional analysis.
 					</section>
+
 				</section>
 
 			</div>
@@ -182,6 +183,8 @@ <h3>TeX Macros</h3>
 				history: true,
 				transition: 'linear',
 
+				// MathJax2 configuration (commented out)
+				/*
 				mathjax2: {
 					config: 'TeX-AMS_HTML-full',
 					TeX: {
@@ -191,14 +194,42 @@ <h3>TeX Macros</h3>
 						}
 					}
 				},
+				*/
+
+				// MathJax4 configuration
+				mathjax4: {
+					tex: {
+						inlineMath: [['$', '$'], ['\\(', '\\)']],
+						displayMath: [['$$', '$$'], ['\\[', '\\]']],
+						macros: {
+							R: '\\mathbb{R}',
+							set: ['\\left\\{#1 \\; ; \\; #2\\right\\}', 2]
+						}
+					},
+					options: {
+						skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+					},
+					output: {
+						font: 'mathjax-stix2',
+						displayOverflow: 'linebreak',
+						linebreaks: {             // options for when overflow is linebreak
+							inline: true,              // true for browser-based breaking of inline equations
+							width: '100%',             // a fixed size or a percentage of the container width
+							lineleading: .2,           // the default lineleading in em units
+							LinebreakVisitor: null     // The LinebreakVisitor to use
+						}
+					}
+				},
 
-				// There are three typesetters available
+				// There are four typesetters available
 				// RevealMath.MathJax2 (default)
 				// RevealMath.MathJax3
+				// RevealMath.MathJax4
 				// RevealMath.KaTeX
 				//
+				// This example uses MathJax4 with macros support
 				// More info at https://revealjs.com/math/
-				plugins: [ RevealMath.MathJax2 ]
+				plugins: [ RevealMath.MathJax4 ]
 			});
 		</script>
 

js/controllers/plugins.js

@@ -206,7 +206,6 @@ export default class Plugins {
 		else {
 			console.warn( 'reveal.js: "'+ id +'" plugin has already been registered' );
 		}
-
 	}
 
 	/**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",

plugin/math/mathjax4.js

@@ -0,0 +1,81 @@
+/**
+ * A plugin which enables rendering of math equations inside
+ * of reveal.js slides. Essentially a thin wrapper for MathJax 4
+ *
+ * @author Hakim El Hattab
+ * @author Gerhard Burger
+ * @author Khris Griffis, Ph.D.
+ */
+export const MathJax4 = () => {
+
+    // The reveal.js instance this plugin is attached to
+    let deck;
+
+    let defaultOptions = {
+        tex: {
+            inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ]  ]
+        },
+        options: {
+            skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre', 'code' ]
+        },
+        startup: {
+            ready: () => {
+                MathJax.startup.defaultReady();
+                MathJax.startup.promise.then(() => {
+                    deck.layout();
+                });
+            }
+        }
+    };
+
+    function loadScript( url, callback ) {
+
+        let 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
+        script.onload = () => {
+            if (typeof callback === 'function') {
+                callback.call();
+                callback = null;
+            }
+        };
+
+        document.head.appendChild( script );
+    }
+
+    return {
+        id: 'mathjax4',
+        init: function(reveal) {
+
+            deck = reveal;
+
+            let revealOptions = deck.getConfig().mathjax4 || {};
+            let options = { ...defaultOptions, ...revealOptions };
+            options.tex = { ...defaultOptions.tex, ...revealOptions.tex };
+            options.options = { ...defaultOptions.options, ...revealOptions.options };
+            options.startup = { ...defaultOptions.startup, ...revealOptions.startup };
+
+            let url = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js';
+            options.mathjax = null;
+
+            window.MathJax = options;
+
+            loadScript(url, function() {
+                // MathJax 4.0.0 uses async startup, so we need to wait for it to be ready
+                MathJax.startup.promise.then(() => {
+                    // Initial typeset after startup
+                    MathJax.typeset();
+
+                    // Reprocess equations in slides when they turn visible
+                    deck.addEventListener('slidechanged', function(event) {
+                        MathJax.typeset();
+                    });
+                });
+            });
+        }
+    };
+};

plugin/math/plugin.js

@@ -1,15 +1,17 @@
 import {KaTeX} from "./katex";
 import {MathJax2} from "./mathjax2";
 import {MathJax3} from "./mathjax3";
+import {MathJax4} from "./mathjax4";
 
 const defaultTypesetter = MathJax2;
 
 /*!
  * This plugin is a wrapper for the MathJax2,
- * MathJax3 and KaTeX typesetter plugins.
+ * MathJax3, MathJax4 and KaTeX typesetter plugins.
  */
 export default Plugin = Object.assign( defaultTypesetter(), {
 	KaTeX,
 	MathJax2,
-	MathJax3
+	MathJax3,
+	MathJax4
 } );