diff options
| author | Juan Marin Noguera <juan@mnpi.eu> | 2023-08-22 17:56:56 +0200 | 
|---|---|---|
| committer | Juan Marin Noguera <juan@mnpi.eu> | 2023-08-22 17:56:56 +0200 | 
| commit | 1fd2213192d22880706440e7f724bdc6db966ee0 (patch) | |
| tree | ff2d6812ef6db399852ad8c4cf2b6f1cd417dfed /present/plugin/math/katex.js | |
| parent | 2f9eb7a94819a08937ba08320a142b7f0be407fd (diff) | |
Añadida presentación1.0
Diffstat (limited to 'present/plugin/math/katex.js')
| -rwxr-xr-x | present/plugin/math/katex.js | 96 | 
1 files changed, 96 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 ) ); +				} +			}); + +		} +	} + +}; | 
