diff options
Diffstat (limited to 'present/plugin/math')
| -rwxr-xr-x | present/plugin/math/katex.js | 96 | ||||
| -rw-r--r-- | present/plugin/math/math.esm.js | 6 | ||||
| -rw-r--r-- | present/plugin/math/math.js | 1 | ||||
| -rw-r--r-- | present/plugin/math/mathjax2.js | 89 | ||||
| -rw-r--r-- | present/plugin/math/mathjax3.js | 77 | ||||
| -rw-r--r-- | present/plugin/math/plugin.js | 15 |
6 files changed, 284 insertions, 0 deletions
diff --git a/present/plugin/math/katex.js b/present/plugin/math/katex.js new file mode 100755 index 0000000..a8b47c4 --- /dev/null +++ b/present/plugin/math/katex.js @@ -0,0 +1,96 @@ +/** + * A plugin which enables rendering of math equations inside + * of reveal.js slides. Essentially a thin wrapper for KaTeX. + * + * @author Hakim El Hattab + * @author Gerhard Burger + */ +export const KaTeX = () => { + let deck; + + let defaultOptions = { + version: 'latest', + delimiters: [ + {left: '$$', right: '$$', display: true}, // Note: $$ has to come before $ + {left: '$', right: '$', display: false}, + {left: '\\(', right: '\\)', display: false}, + {left: '\\[', right: '\\]', display: true} + ], + ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre'] + } + + const loadCss = src => { + let link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = src; + document.head.appendChild(link); + }; + + /** + * Loads a JavaScript file and returns a Promise for when it is loaded + * Credits: https://aaronsmith.online/easily-load-an-external-script-using-javascript/ + */ + const loadScript = src => { + return new Promise((resolve, reject) => { + const script = document.createElement('script') + script.type = 'text/javascript' + script.onload = resolve + script.onerror = reject + script.src = src + document.head.append(script) + }) + }; + + async function loadScripts(urls) { + for(const url of urls) { + await loadScript(url); + } + } + + return { + id: 'katex', + + init: function (reveal) { + + deck = reveal; + + let revealOptions = deck.getConfig().katex || {}; + + let options = {...defaultOptions, ...revealOptions}; + const {local, version, extensions, ...katexOptions} = options; + + let baseUrl = options.local || 'https://cdn.jsdelivr.net/npm/katex'; + let versionString = options.local ? '' : '@' + options.version; + + let cssUrl = baseUrl + versionString + '/dist/katex.min.css'; + let katexUrl = baseUrl + versionString + '/dist/katex.min.js'; + let mhchemUrl = baseUrl + versionString + '/dist/contrib/mhchem.min.js' + let karUrl = baseUrl + versionString + '/dist/contrib/auto-render.min.js'; + + let katexScripts = [katexUrl]; + if(options.extensions && options.extensions.includes("mhchem")) { + katexScripts.push(mhchemUrl); + } + katexScripts.push(karUrl); + + const renderMath = () => { + renderMathInElement(reveal.getSlidesElement(), katexOptions); + deck.layout(); + } + + loadCss(cssUrl); + + // For some reason dynamically loading with defer attribute doesn't result in the expected behavior, the below code does + loadScripts(katexScripts).then(() => { + if( deck.isReady() ) { + renderMath(); + } + else { + deck.on( 'ready', renderMath.bind( this ) ); + } + }); + + } + } + +}; diff --git a/present/plugin/math/math.esm.js b/present/plugin/math/math.esm.js new file mode 100644 index 0000000..f25ff60 --- /dev/null +++ b/present/plugin/math/math.esm.js @@ -0,0 +1,6 @@ +const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(a){t=a;let n=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...n},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...n.tex2jax},i.mathjax=i.config=null,function(t,e){let a=document.querySelector("head"),n=document.createElement("script");n.type="text/javascript",n.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};n.onload=i,n.onreadystatechange=()=>{"loaded"===this.readyState&&i()},a.appendChild(n)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t; +/*! + * This plugin is a wrapper for the MathJax2, + * MathJax3 and KaTeX typesetter plugins. + */ +var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:l,version:o,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export default a; diff --git a/present/plugin/math/math.js b/present/plugin/math/math.js new file mode 100644 index 0000000..0564317 --- /dev/null +++ b/present/plugin/math/math.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})})); diff --git a/present/plugin/math/mathjax2.js b/present/plugin/math/mathjax2.js new file mode 100644 index 0000000..daebe7e --- /dev/null +++ b/present/plugin/math/mathjax2.js @@ -0,0 +1,89 @@ +/** + * A plugin which enables rendering of math equations inside + * of reveal.js slides. Essentially a thin wrapper for MathJax. + * + * @author Hakim El Hattab + */ +export const MathJax2 = () => { + + // The reveal.js instance this plugin is attached to + let deck; + + let defaultOptions = { + messageStyle: 'none', + tex2jax: { + inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ], + skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ] + }, + skipStartupTypeset: true + }; + + function loadScript( url, callback ) { + + let head = document.querySelector( 'head' ); + let script = document.createElement( 'script' ); + script.type = 'text/javascript'; + script.src = url; + + // Wrapper for callback to make sure it only fires once + let finish = () => { + if( typeof callback === 'function' ) { + callback.call(); + callback = null; + } + } + + script.onload = finish; + + // IE + script.onreadystatechange = () => { + if ( this.readyState === 'loaded' ) { + finish(); + } + } + + // Normal browsers + head.appendChild( script ); + + } + + return { + id: 'mathjax2', + + init: function( reveal ) { + + deck = reveal; + + let revealOptions = deck.getConfig().mathjax2 || deck.getConfig().math || {}; + + let options = { ...defaultOptions, ...revealOptions }; + let mathjax = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js'; + let config = options.config || 'TeX-AMS_HTML-full'; + let url = mathjax + '?config=' + config; + + options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.tex2jax }; + + options.mathjax = options.config = null; + + loadScript( url, function() { + + MathJax.Hub.Config( options ); + + // Typeset followed by an immediate reveal.js layout since + // the typesetting process could affect slide height + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, deck.getRevealElement() ] ); + MathJax.Hub.Queue( deck.layout ); + + // Reprocess equations in slides when they turn visible + deck.on( 'slidechanged', function( event ) { + + MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); + + } ); + + } ); + + } + } + +}; diff --git a/present/plugin/math/mathjax3.js b/present/plugin/math/mathjax3.js new file mode 100644 index 0000000..9e62d0d --- /dev/null +++ b/present/plugin/math/mathjax3.js @@ -0,0 +1,77 @@ +/** + * 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(); + } ); + } ); + + } + } + +}; diff --git a/present/plugin/math/plugin.js b/present/plugin/math/plugin.js new file mode 100644 index 0000000..a92ccfb --- /dev/null +++ b/present/plugin/math/plugin.js @@ -0,0 +1,15 @@ +import {KaTeX} from "./katex"; +import {MathJax2} from "./mathjax2"; +import {MathJax3} from "./mathjax3"; + +const defaultTypesetter = MathJax2; + +/*! + * This plugin is a wrapper for the MathJax2, + * MathJax3 and KaTeX typesetter plugins. + */ +export default Plugin = Object.assign( defaultTypesetter(), { + KaTeX, + MathJax2, + MathJax3 +} );
\ No newline at end of file |