| 1 | /** |
| 2 | * A plugin which enables rendering of math equations inside |
| 3 | * of reveal.js slides. Essentially a thin wrapper for MathJax 4 |
| 4 | * |
| 5 | * @author Hakim El Hattab |
| 6 | * @author Gerhard Burger |
| 7 | * @author Khris Griffis, Ph.D. |
| 8 | */ |
| 9 | export const MathJax4 = () => { |
| 10 | |
| 11 | // The reveal.js instance this plugin is attached to |
| 12 | let deck; |
| 13 | |
| 14 | let defaultOptions = { |
| 15 | tex: { |
| 16 | inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ] |
| 17 | }, |
| 18 | options: { |
| 19 | skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre', 'code' ] |
| 20 | }, |
| 21 | startup: { |
| 22 | ready: () => { |
| 23 | MathJax.startup.defaultReady(); |
| 24 | MathJax.startup.promise.then(() => { |
| 25 | deck.layout(); |
| 26 | }); |
| 27 | } |
| 28 | } |
| 29 | }; |
| 30 | |
| 31 | function loadScript( url, callback ) { |
| 32 | |
| 33 | let script = document.createElement( 'script' ); |
| 34 | script.type = 'text/javascript'; |
| 35 | script.id = 'MathJax-script'; |
| 36 | script.src = url; |
| 37 | script.async = true; |
| 38 | |
| 39 | // Wrapper for callback to make sure it only fires once |
| 40 | script.onload = () => { |
| 41 | if (typeof callback === 'function') { |
| 42 | callback.call(); |
| 43 | callback = null; |
| 44 | } |
| 45 | }; |
| 46 | |
| 47 | document.head.appendChild( script ); |
| 48 | } |
| 49 | |
| 50 | return { |
| 51 | id: 'mathjax4', |
| 52 | init: function(reveal) { |
| 53 | |
| 54 | deck = reveal; |
| 55 | |
| 56 | let revealOptions = deck.getConfig().mathjax4 || {}; |
| 57 | let options = { ...defaultOptions, ...revealOptions }; |
| 58 | options.tex = { ...defaultOptions.tex, ...revealOptions.tex }; |
| 59 | options.options = { ...defaultOptions.options, ...revealOptions.options }; |
| 60 | options.startup = { ...defaultOptions.startup, ...revealOptions.startup }; |
| 61 | |
| 62 | let url = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js'; |
| 63 | options.mathjax = null; |
| 64 | |
| 65 | window.MathJax = options; |
| 66 | |
| 67 | loadScript(url, function() { |
| 68 | // MathJax 4.0.0 uses async startup, so we need to wait for it to be ready |
| 69 | MathJax.startup.promise.then(() => { |
| 70 | // Initial typeset after startup |
| 71 | MathJax.typeset(); |
| 72 | |
| 73 | // Reprocess equations in slides when they turn visible |
| 74 | deck.addEventListener('slidechanged', function(event) { |
| 75 | MathJax.typeset(); |
| 76 | }); |
| 77 | }); |
| 78 | }); |
| 79 | } |
| 80 | }; |
| 81 | }; |
| 82 |