/** * 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 */ export const MathJax3 = () => { // The reveal.js instance this plugin is attached to let deck; let defaultOptions = { tex: { inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ] }, options: { skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ] }, startup: { ready: () => { MathJax.startup.defaultReady(); MathJax.startup.promise.then(() => { Reveal.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: 'mathjax3', init: function(reveal) { deck = reveal; let revealOptions = deck.getConfig().mathjax3 || {}; 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@3/es5/tex-mml-chtml.js'; options.mathjax = null; window.MathJax = options; loadScript( url, function() { // Reprocess equations in slides when they turn visible Reveal.addEventListener( 'slidechanged', function( event ) { MathJax.typeset(); } ); } ); } } };