mathjax3.js 2.2 KB

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