dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

add @burgerga's math plugin with MathJax2, MathJax3 and KaTeX support #2559

This commit is contained in:
hakimel 2021-10-28 13:41:57 +02:00
parent 810d80bc3c
commit 0ea4193001
8 changed files with 283 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/math.html
View File

@ -182,8 +182,7 @@
history: true, history: true,
transition: 'linear', transition: 'linear',
math: { mathjax2: {
// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full', config: 'TeX-AMS_HTML-full',
TeX: { TeX: {
Macros: { Macros: {
@ -193,7 +192,13 @@
} }
}, },
plugins: [ RevealMath ] // There are three typesetters available
// RevealMath.MathJax2 (default)
// RevealMath.MathJax3
// RevealMath.KaTeX
//
// More info at https://revealjs.com/math/
plugins: [ RevealMath.MathJax2 ]
}); });
</script> </script>

12
package-lock.json generated
View File

@ -2227,9 +2227,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001228", "version": "1.0.30001272",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
"integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==", "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
"dev": true, "dev": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@ -11296,9 +11296,9 @@
"dev": true "dev": true
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001228", "version": "1.0.30001272",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
"integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==", "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
"dev": true "dev": true
}, },
"chalk": { "chalk": {

87
plugin/math/katex.js Executable file
View File

@ -0,0 +1,87 @@
/**
* 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: false},
{left: '$$', right: '$$', display: true},
{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);
loadCss(cssUrl);
// For some reason dynamically loading with defer attribute doesn't result in the expected behavior, the below code does
loadScripts(katexScripts).then(() => {
renderMathInElement(document.body, katexOptions);
deck.layout();
});
}
}
};

2
plugin/math/math.esm.js
View File

File diff suppressed because one or more lines are too long

2
plugin/math/math.js
View File

File diff suppressed because one or more lines are too long

89
plugin/math/mathjax2.js Normal file
View File

@ -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 ] );
} );
} );
}
}
};

77
plugin/math/mathjax3.js Normal file
View File

@ -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 = {...options.options, ...defaultOptions.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();
} );
} );
}
}
};

104
plugin/math/plugin.js Executable file → Normal file
View File

@ -1,91 +1,15 @@
/** import {KaTeX} from "./katex";
* A plugin which enables rendering of math equations inside import {MathJax2} from "./mathjax2";
* of reveal.js slides. Essentially a thin wrapper for MathJax. import {MathJax3} from "./mathjax3";
*
* @author Hakim El Hattab const defaultTypesetter = MathJax2;
/*!
* This plugin is a wrapper for the MathJax2,
* MathJax3 and KaTeX typesetter plugins.
*/ */
const Plugin = () => { export default Plugin = Object.assign( defaultTypesetter(), {
KaTeX,
// The reveal.js instance this plugin is attached to MathJax2,
let deck; MathJax3
} );
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: 'math',
init: function( reveal ) {
deck = reveal;
let revealOptions = deck.getConfig().math || {};
let options = { ...defaultOptions, ...revealOptions };
let mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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 ] );
} );
} );
}
}
};
export default Plugin;