make plugins work with multiple presentations on same page
parent
210fbb7646
commit
b92d16f48d
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
<link rel="stylesheet" href="../dist/reveal.css">
|
<link rel="stylesheet" href="../dist/reveal.css">
|
||||||
<link rel="stylesheet" href="../dist/theme/white.css" id="theme">
|
<link rel="stylesheet" href="../dist/theme/white.css" id="theme">
|
||||||
|
<link rel="stylesheet" href="../lib/css/monokai.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="background: #ddd;">
|
<body style="background: #ddd;">
|
||||||
|
@ -19,6 +20,14 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Deck 1, Slide 1</section>
|
<section>Deck 1, Slide 1</section>
|
||||||
<section>Deck 1, Slide 2</section>
|
<section>Deck 1, Slide 2</section>
|
||||||
|
<section>
|
||||||
|
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
function Example() {
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -26,16 +35,38 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Deck 2, Slide 1</section>
|
<section>Deck 2, Slide 1</section>
|
||||||
<section>Deck 2, Slide 2</section>
|
<section>Deck 2, Slide 2</section>
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
## Markdown plugin
|
||||||
|
|
||||||
|
- 1
|
||||||
|
- 2
|
||||||
|
- 3
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>The Lorenz Equations</h3>
|
||||||
|
|
||||||
|
\[\begin{aligned}
|
||||||
|
\dot{x} & = \sigma(y-x) \\
|
||||||
|
\dot{y} & = \rho x - y - xz \\
|
||||||
|
\dot{z} & = -\beta z + xy
|
||||||
|
\end{aligned} \]
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../dist/reveal.es5.js"></script>
|
<script src="../dist/reveal.es5.js"></script>
|
||||||
|
<script src="../dist/plugin/highlight.js"></script>
|
||||||
|
<script src="../dist/plugin/markdown.js"></script>
|
||||||
|
<script src="../dist/plugin/math.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
let deck1 = new Reveal( document.querySelector( '.deck1' ), {
|
let deck1 = new Reveal( document.querySelector( '.deck1' ), {
|
||||||
embedded: true,
|
embedded: true,
|
||||||
keyboard: false
|
keyboard: false,
|
||||||
|
plugins: [ RevealHighlight ]
|
||||||
} );
|
} );
|
||||||
deck1.on( 'slidechanged', () => {
|
deck1.on( 'slidechanged', () => {
|
||||||
console.log( 'Deck 1 slide changed' );
|
console.log( 'Deck 1 slide changed' );
|
||||||
|
@ -44,7 +75,8 @@
|
||||||
|
|
||||||
let deck2 = new Reveal( document.querySelector( '.deck2' ), {
|
let deck2 = new Reveal( document.querySelector( '.deck2' ), {
|
||||||
embedded: true,
|
embedded: true,
|
||||||
keyboard: false
|
keyboard: true,
|
||||||
|
plugins: [ RevealMarkdown, RevealMath ]
|
||||||
} );
|
} );
|
||||||
deck2.initialize().then( () => {
|
deck2.initialize().then( () => {
|
||||||
deck2.slide(1);
|
deck2.slide(1);
|
||||||
|
|
|
@ -13,14 +13,22 @@ let Plugin = {
|
||||||
HIGHLIGHT_LINE_DELIMITER: ',',
|
HIGHLIGHT_LINE_DELIMITER: ',',
|
||||||
HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
|
HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
|
||||||
|
|
||||||
init: function( deck ) {
|
/**
|
||||||
|
* Highlights code blocks withing the given deck.
|
||||||
|
*
|
||||||
|
* Note that this can be called multiple times if
|
||||||
|
* there are multiple presentations on one page.
|
||||||
|
*
|
||||||
|
* @param {Reveal} reveal the reveal.js instance
|
||||||
|
*/
|
||||||
|
init: function( reveal ) {
|
||||||
|
|
||||||
// Read the plugin config options and provide fallbacks
|
// Read the plugin config options and provide fallbacks
|
||||||
var config = deck.getConfig().highlight || {};
|
var config = reveal.getConfig().highlight || {};
|
||||||
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
|
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
|
||||||
config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
|
config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
|
||||||
|
|
||||||
[].slice.call( document.querySelectorAll( '.reveal pre code' ) ).forEach( function( block ) {
|
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {
|
||||||
|
|
||||||
// Trim whitespace if the "data-trim" attribute is present
|
// Trim whitespace if the "data-trim" attribute is present
|
||||||
if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
|
if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
|
||||||
|
@ -45,8 +53,8 @@ let Plugin = {
|
||||||
|
|
||||||
// If we're printing to PDF, scroll the code highlights of
|
// If we're printing to PDF, scroll the code highlights of
|
||||||
// all blocks in the deck into view at once
|
// all blocks in the deck into view at once
|
||||||
deck.on( 'pdf-ready', function() {
|
reveal.on( 'pdf-ready', function() {
|
||||||
[].slice.call( document.querySelectorAll( '.reveal pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
|
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
|
||||||
Plugin.scrollHighlightedLineIntoView( block, {}, true );
|
Plugin.scrollHighlightedLineIntoView( block, {}, true );
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -6,429 +6,435 @@
|
||||||
|
|
||||||
import marked from './marked.js'
|
import marked from './marked.js'
|
||||||
|
|
||||||
let Plugin = {
|
const DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
|
||||||
|
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
||||||
|
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||||
|
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||||
|
|
||||||
id: 'markdown',
|
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||||
|
|
||||||
|
const Plugin = () => {
|
||||||
|
|
||||||
|
// The reveal.js instance this plugin is attached to
|
||||||
|
let deck;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Starts processing and converting Markdown within the
|
* Retrieves the markdown contents of a slide section
|
||||||
* current reveal.js deck.
|
* element. Normalizes leading tabs/whitespace.
|
||||||
*/
|
*/
|
||||||
init: function( deck ) {
|
function getMarkdownFromSlide( section ) {
|
||||||
|
|
||||||
// This should no longer be needed, as long as the highlight.js
|
// look for a <script> or <textarea data-template> wrapper
|
||||||
// plugin is included after the markdown plugin
|
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
|
||||||
// if( typeof window.hljs !== 'undefined' ) {
|
|
||||||
// marked.setOptions({
|
|
||||||
// highlight: function( code, lang ) {
|
|
||||||
// return window.hljs.highlightAuto( code, lang ? [lang] : null ).value;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// marked can be configured via reveal.js config options
|
// strip leading whitespace so it isn't evaluated as code
|
||||||
var options = deck.getConfig().markdown;
|
var text = ( template || section ).textContent;
|
||||||
if( options ) {
|
|
||||||
marked.setOptions( options );
|
// restore script end tags
|
||||||
|
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
|
||||||
|
|
||||||
|
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
|
||||||
|
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
|
||||||
|
|
||||||
|
if( leadingTabs > 0 ) {
|
||||||
|
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||||
|
}
|
||||||
|
else if( leadingWs > 1 ) {
|
||||||
|
text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
|
||||||
}
|
}
|
||||||
|
|
||||||
return processSlides( deck.getRevealElement() ).then( convertSlides );
|
return text;
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
// TODO: Do these belong in the API?
|
|
||||||
processSlides: processSlides,
|
|
||||||
convertSlides: convertSlides,
|
|
||||||
slidify: slidify,
|
|
||||||
marked: marked
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export default () => Plugin;
|
|
||||||
|
|
||||||
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
|
|
||||||
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
|
||||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
|
||||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
|
||||||
|
|
||||||
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retrieves the markdown contents of a slide section
|
|
||||||
* element. Normalizes leading tabs/whitespace.
|
|
||||||
*/
|
|
||||||
function getMarkdownFromSlide( section ) {
|
|
||||||
|
|
||||||
// look for a <script> or <textarea data-template> wrapper
|
|
||||||
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
|
|
||||||
|
|
||||||
// strip leading whitespace so it isn't evaluated as code
|
|
||||||
var text = ( template || section ).textContent;
|
|
||||||
|
|
||||||
// restore script end tags
|
|
||||||
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
|
|
||||||
|
|
||||||
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
|
|
||||||
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
|
|
||||||
|
|
||||||
if( leadingTabs > 0 ) {
|
|
||||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
|
||||||
}
|
|
||||||
else if( leadingWs > 1 ) {
|
|
||||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return text;
|
/**
|
||||||
|
* Given a markdown slide section element, this will
|
||||||
|
* return all arguments that aren't related to markdown
|
||||||
|
* parsing. Used to forward any other user-defined arguments
|
||||||
|
* to the output markdown slide.
|
||||||
|
*/
|
||||||
|
function getForwardedAttributes( section ) {
|
||||||
|
|
||||||
}
|
var attributes = section.attributes;
|
||||||
|
var result = [];
|
||||||
|
|
||||||
/**
|
for( var i = 0, len = attributes.length; i < len; i++ ) {
|
||||||
* Given a markdown slide section element, this will
|
var name = attributes[i].name,
|
||||||
* return all arguments that aren't related to markdown
|
value = attributes[i].value;
|
||||||
* parsing. Used to forward any other user-defined arguments
|
|
||||||
* to the output markdown slide.
|
|
||||||
*/
|
|
||||||
function getForwardedAttributes( section ) {
|
|
||||||
|
|
||||||
var attributes = section.attributes;
|
// disregard attributes that are used for markdown loading/parsing
|
||||||
var result = [];
|
if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
|
||||||
|
|
||||||
for( var i = 0, len = attributes.length; i < len; i++ ) {
|
|
||||||
var name = attributes[i].name,
|
|
||||||
value = attributes[i].value;
|
|
||||||
|
|
||||||
// disregard attributes that are used for markdown loading/parsing
|
|
||||||
if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
|
|
||||||
|
|
||||||
if( value ) {
|
|
||||||
result.push( name + '="' + value + '"' );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
result.push( name );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result.join( ' ' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Inspects the given options and fills out default
|
|
||||||
* values for what's not defined.
|
|
||||||
*/
|
|
||||||
function getSlidifyOptions( options ) {
|
|
||||||
|
|
||||||
options = options || {};
|
|
||||||
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
|
|
||||||
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
|
||||||
options.attributes = options.attributes || '';
|
|
||||||
|
|
||||||
return options;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper function for constructing a markdown slide.
|
|
||||||
*/
|
|
||||||
function createMarkdownSlide( content, options ) {
|
|
||||||
|
|
||||||
options = getSlidifyOptions( options );
|
|
||||||
|
|
||||||
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
|
|
||||||
|
|
||||||
if( notesMatch.length === 2 ) {
|
|
||||||
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// prevent script end tags in the content from interfering
|
|
||||||
// with parsing
|
|
||||||
content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
|
|
||||||
|
|
||||||
return '<script type="text/template">' + content + '</script>';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parses a data string into multiple slides based
|
|
||||||
* on the passed in separator arguments.
|
|
||||||
*/
|
|
||||||
function slidify( markdown, options ) {
|
|
||||||
|
|
||||||
options = getSlidifyOptions( options );
|
|
||||||
|
|
||||||
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
|
|
||||||
horizontalSeparatorRegex = new RegExp( options.separator );
|
|
||||||
|
|
||||||
var matches,
|
|
||||||
lastIndex = 0,
|
|
||||||
isHorizontal,
|
|
||||||
wasHorizontal = true,
|
|
||||||
content,
|
|
||||||
sectionStack = [];
|
|
||||||
|
|
||||||
// iterate until all blocks between separators are stacked up
|
|
||||||
while( matches = separatorRegex.exec( markdown ) ) {
|
|
||||||
var notes = null;
|
|
||||||
|
|
||||||
// determine direction (horizontal by default)
|
|
||||||
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
|
|
||||||
|
|
||||||
if( !isHorizontal && wasHorizontal ) {
|
|
||||||
// create vertical stack
|
|
||||||
sectionStack.push( [] );
|
|
||||||
}
|
|
||||||
|
|
||||||
// pluck slide content from markdown input
|
|
||||||
content = markdown.substring( lastIndex, matches.index );
|
|
||||||
|
|
||||||
if( isHorizontal && wasHorizontal ) {
|
|
||||||
// add to horizontal stack
|
|
||||||
sectionStack.push( content );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// add to vertical stack
|
|
||||||
sectionStack[sectionStack.length-1].push( content );
|
|
||||||
}
|
|
||||||
|
|
||||||
lastIndex = separatorRegex.lastIndex;
|
|
||||||
wasHorizontal = isHorizontal;
|
|
||||||
}
|
|
||||||
|
|
||||||
// add the remaining slide
|
|
||||||
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
|
|
||||||
|
|
||||||
var markdownSections = '';
|
|
||||||
|
|
||||||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
|
||||||
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
|
|
||||||
// vertical
|
|
||||||
if( sectionStack[i] instanceof Array ) {
|
|
||||||
markdownSections += '<section '+ options.attributes +'>';
|
|
||||||
|
|
||||||
sectionStack[i].forEach( function( child ) {
|
|
||||||
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
|
|
||||||
} );
|
|
||||||
|
|
||||||
markdownSections += '</section>';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return markdownSections;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parses any current data-markdown slides, splits
|
|
||||||
* multi-slide markdown into separate sections and
|
|
||||||
* handles loading of external markdown.
|
|
||||||
*/
|
|
||||||
function processSlides( scope ) {
|
|
||||||
|
|
||||||
return new Promise( function( resolve ) {
|
|
||||||
|
|
||||||
var externalPromises = [];
|
|
||||||
|
|
||||||
[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
|
|
||||||
|
|
||||||
if( section.getAttribute( 'data-markdown' ).length ) {
|
|
||||||
|
|
||||||
externalPromises.push( loadExternalMarkdown( section ).then(
|
|
||||||
|
|
||||||
// Finished loading external file
|
|
||||||
function( xhr, url ) {
|
|
||||||
section.outerHTML = slidify( xhr.responseText, {
|
|
||||||
separator: section.getAttribute( 'data-separator' ),
|
|
||||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
|
||||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
|
||||||
attributes: getForwardedAttributes( section )
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Failed to load markdown
|
|
||||||
function( xhr, url ) {
|
|
||||||
section.outerHTML = '<section data-state="alert">' +
|
|
||||||
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
|
|
||||||
'Check your browser\'s JavaScript console for more details.' +
|
|
||||||
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
|
|
||||||
'</section>';
|
|
||||||
}
|
|
||||||
|
|
||||||
) );
|
|
||||||
|
|
||||||
}
|
|
||||||
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
|
||||||
|
|
||||||
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
|
||||||
separator: section.getAttribute( 'data-separator' ),
|
|
||||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
|
||||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
|
||||||
attributes: getForwardedAttributes( section )
|
|
||||||
});
|
|
||||||
|
|
||||||
|
if( value ) {
|
||||||
|
result.push( name + '="' + value + '"' );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
|
result.push( name );
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.all( externalPromises ).then( resolve );
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadExternalMarkdown( section ) {
|
|
||||||
|
|
||||||
return new Promise( function( resolve, reject ) {
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest(),
|
|
||||||
url = section.getAttribute( 'data-markdown' );
|
|
||||||
|
|
||||||
var datacharset = section.getAttribute( 'data-charset' );
|
|
||||||
|
|
||||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
|
||||||
if( datacharset != null && datacharset != '' ) {
|
|
||||||
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
xhr.onreadystatechange = function( section, xhr ) {
|
return result.join( ' ' );
|
||||||
if( xhr.readyState === 4 ) {
|
|
||||||
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
|
||||||
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
|
||||||
|
|
||||||
resolve( xhr, url );
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inspects the given options and fills out default
|
||||||
|
* values for what's not defined.
|
||||||
|
*/
|
||||||
|
function getSlidifyOptions( options ) {
|
||||||
|
|
||||||
|
options = options || {};
|
||||||
|
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
|
||||||
|
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
||||||
|
options.attributes = options.attributes || '';
|
||||||
|
|
||||||
|
return options;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper function for constructing a markdown slide.
|
||||||
|
*/
|
||||||
|
function createMarkdownSlide( content, options ) {
|
||||||
|
|
||||||
|
options = getSlidifyOptions( options );
|
||||||
|
|
||||||
|
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
|
||||||
|
|
||||||
|
if( notesMatch.length === 2 ) {
|
||||||
|
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// prevent script end tags in the content from interfering
|
||||||
|
// with parsing
|
||||||
|
content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
|
||||||
|
|
||||||
|
return '<script type="text/template">' + content + '</script>';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parses a data string into multiple slides based
|
||||||
|
* on the passed in separator arguments.
|
||||||
|
*/
|
||||||
|
function slidify( markdown, options ) {
|
||||||
|
|
||||||
|
options = getSlidifyOptions( options );
|
||||||
|
|
||||||
|
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
|
||||||
|
horizontalSeparatorRegex = new RegExp( options.separator );
|
||||||
|
|
||||||
|
var matches,
|
||||||
|
lastIndex = 0,
|
||||||
|
isHorizontal,
|
||||||
|
wasHorizontal = true,
|
||||||
|
content,
|
||||||
|
sectionStack = [];
|
||||||
|
|
||||||
|
// iterate until all blocks between separators are stacked up
|
||||||
|
while( matches = separatorRegex.exec( markdown ) ) {
|
||||||
|
var notes = null;
|
||||||
|
|
||||||
|
// determine direction (horizontal by default)
|
||||||
|
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
|
||||||
|
|
||||||
|
if( !isHorizontal && wasHorizontal ) {
|
||||||
|
// create vertical stack
|
||||||
|
sectionStack.push( [] );
|
||||||
|
}
|
||||||
|
|
||||||
|
// pluck slide content from markdown input
|
||||||
|
content = markdown.substring( lastIndex, matches.index );
|
||||||
|
|
||||||
|
if( isHorizontal && wasHorizontal ) {
|
||||||
|
// add to horizontal stack
|
||||||
|
sectionStack.push( content );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// add to vertical stack
|
||||||
|
sectionStack[sectionStack.length-1].push( content );
|
||||||
|
}
|
||||||
|
|
||||||
|
lastIndex = separatorRegex.lastIndex;
|
||||||
|
wasHorizontal = isHorizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add the remaining slide
|
||||||
|
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
|
||||||
|
|
||||||
|
var markdownSections = '';
|
||||||
|
|
||||||
|
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
||||||
|
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
|
||||||
|
// vertical
|
||||||
|
if( sectionStack[i] instanceof Array ) {
|
||||||
|
markdownSections += '<section '+ options.attributes +'>';
|
||||||
|
|
||||||
|
sectionStack[i].forEach( function( child ) {
|
||||||
|
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
|
||||||
|
} );
|
||||||
|
|
||||||
|
markdownSections += '</section>';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return markdownSections;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parses any current data-markdown slides, splits
|
||||||
|
* multi-slide markdown into separate sections and
|
||||||
|
* handles loading of external markdown.
|
||||||
|
*/
|
||||||
|
function processSlides( scope ) {
|
||||||
|
|
||||||
|
return new Promise( function( resolve ) {
|
||||||
|
|
||||||
|
var externalPromises = [];
|
||||||
|
|
||||||
|
[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
|
||||||
|
|
||||||
|
if( section.getAttribute( 'data-markdown' ).length ) {
|
||||||
|
|
||||||
|
externalPromises.push( loadExternalMarkdown( section ).then(
|
||||||
|
|
||||||
|
// Finished loading external file
|
||||||
|
function( xhr, url ) {
|
||||||
|
section.outerHTML = slidify( xhr.responseText, {
|
||||||
|
separator: section.getAttribute( 'data-separator' ),
|
||||||
|
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||||
|
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||||
|
attributes: getForwardedAttributes( section )
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Failed to load markdown
|
||||||
|
function( xhr, url ) {
|
||||||
|
section.outerHTML = '<section data-state="alert">' +
|
||||||
|
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
|
||||||
|
'Check your browser\'s JavaScript console for more details.' +
|
||||||
|
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
|
||||||
|
'</section>';
|
||||||
|
}
|
||||||
|
|
||||||
|
) );
|
||||||
|
|
||||||
|
}
|
||||||
|
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
||||||
|
|
||||||
|
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
||||||
|
separator: section.getAttribute( 'data-separator' ),
|
||||||
|
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||||
|
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||||
|
attributes: getForwardedAttributes( section )
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
|
||||||
reject( xhr, url );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}.bind( this, section, xhr );
|
|
||||||
|
|
||||||
xhr.open( 'GET', url, true );
|
});
|
||||||
|
|
||||||
try {
|
Promise.all( externalPromises ).then( resolve );
|
||||||
xhr.send();
|
|
||||||
}
|
|
||||||
catch ( e ) {
|
|
||||||
console.warn( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
|
|
||||||
resolve( xhr, url );
|
|
||||||
}
|
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if a node value has the attributes pattern.
|
|
||||||
* If yes, extract it and add that value as one or several attributes
|
|
||||||
* to the target element.
|
|
||||||
*
|
|
||||||
* You need Cache Killer on Chrome to see the effect on any FOM transformation
|
|
||||||
* directly on refresh (F5)
|
|
||||||
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
|
|
||||||
*/
|
|
||||||
function addAttributeInElement( node, elementTarget, separator ) {
|
|
||||||
|
|
||||||
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
|
|
||||||
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
|
|
||||||
var nodeValue = node.nodeValue;
|
|
||||||
var matches,
|
|
||||||
matchesClass;
|
|
||||||
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
|
|
||||||
|
|
||||||
var classes = matches[1];
|
|
||||||
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
|
|
||||||
node.nodeValue = nodeValue;
|
|
||||||
while( matchesClass = mardownClassRegex.exec( classes ) ) {
|
|
||||||
if( matchesClass[2] ) {
|
|
||||||
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
|
|
||||||
} else {
|
|
||||||
elementTarget.setAttribute( matchesClass[3], "" );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
function loadExternalMarkdown( section ) {
|
||||||
* Add attributes to the parent element of a text node,
|
|
||||||
* or the element of an attribute node.
|
return new Promise( function( resolve, reject ) {
|
||||||
*/
|
|
||||||
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
|
var xhr = new XMLHttpRequest(),
|
||||||
|
url = section.getAttribute( 'data-markdown' );
|
||||||
|
|
||||||
|
var datacharset = section.getAttribute( 'data-charset' );
|
||||||
|
|
||||||
|
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||||
|
if( datacharset != null && datacharset != '' ) {
|
||||||
|
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.onreadystatechange = function( section, xhr ) {
|
||||||
|
if( xhr.readyState === 4 ) {
|
||||||
|
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||||
|
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
||||||
|
|
||||||
|
resolve( xhr, url );
|
||||||
|
|
||||||
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
|
|
||||||
var previousParentElement = element;
|
|
||||||
for( var i = 0; i < element.childNodes.length; i++ ) {
|
|
||||||
var childElement = element.childNodes[i];
|
|
||||||
if ( i > 0 ) {
|
|
||||||
var j = i - 1;
|
|
||||||
while ( j >= 0 ) {
|
|
||||||
var aPreviousChildElement = element.childNodes[j];
|
|
||||||
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
|
|
||||||
previousParentElement = aPreviousChildElement;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
j = j - 1;
|
else {
|
||||||
|
|
||||||
|
reject( xhr, url );
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}.bind( this, section, xhr );
|
||||||
|
|
||||||
|
xhr.open( 'GET', url, true );
|
||||||
|
|
||||||
|
try {
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
catch ( e ) {
|
||||||
|
console.warn( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
|
||||||
|
resolve( xhr, url );
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a node value has the attributes pattern.
|
||||||
|
* If yes, extract it and add that value as one or several attributes
|
||||||
|
* to the target element.
|
||||||
|
*
|
||||||
|
* You need Cache Killer on Chrome to see the effect on any FOM transformation
|
||||||
|
* directly on refresh (F5)
|
||||||
|
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
|
||||||
|
*/
|
||||||
|
function addAttributeInElement( node, elementTarget, separator ) {
|
||||||
|
|
||||||
|
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
|
||||||
|
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
|
||||||
|
var nodeValue = node.nodeValue;
|
||||||
|
var matches,
|
||||||
|
matchesClass;
|
||||||
|
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
|
||||||
|
|
||||||
|
var classes = matches[1];
|
||||||
|
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
|
||||||
|
node.nodeValue = nodeValue;
|
||||||
|
while( matchesClass = mardownClassRegex.exec( classes ) ) {
|
||||||
|
if( matchesClass[2] ) {
|
||||||
|
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
|
||||||
|
} else {
|
||||||
|
elementTarget.setAttribute( matchesClass[3], "" );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var parentSection = section;
|
return true;
|
||||||
if( childElement.nodeName == "section" ) {
|
}
|
||||||
parentSection = childElement ;
|
return false;
|
||||||
previousParentElement = childElement ;
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add attributes to the parent element of a text node,
|
||||||
|
* or the element of an attribute node.
|
||||||
|
*/
|
||||||
|
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
|
||||||
|
|
||||||
|
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
|
||||||
|
var previousParentElement = element;
|
||||||
|
for( var i = 0; i < element.childNodes.length; i++ ) {
|
||||||
|
var childElement = element.childNodes[i];
|
||||||
|
if ( i > 0 ) {
|
||||||
|
var j = i - 1;
|
||||||
|
while ( j >= 0 ) {
|
||||||
|
var aPreviousChildElement = element.childNodes[j];
|
||||||
|
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
|
||||||
|
previousParentElement = aPreviousChildElement;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
j = j - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var parentSection = section;
|
||||||
|
if( childElement.nodeName == "section" ) {
|
||||||
|
parentSection = childElement ;
|
||||||
|
previousParentElement = childElement ;
|
||||||
|
}
|
||||||
|
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
|
||||||
|
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
|
}
|
||||||
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
|
|
||||||
|
if ( element.nodeType == Node.COMMENT_NODE ) {
|
||||||
|
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
|
||||||
|
addAttributeInElement( element, section, separatorSectionAttributes );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( element.nodeType == Node.COMMENT_NODE ) {
|
/**
|
||||||
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
|
* Converts any current data-markdown slides in the
|
||||||
addAttributeInElement( element, section, separatorSectionAttributes );
|
* DOM to HTML.
|
||||||
}
|
*/
|
||||||
|
function convertSlides() {
|
||||||
|
|
||||||
|
var sections = deck.getRevealElement().querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
||||||
|
|
||||||
|
[].slice.call( sections ).forEach( function( section ) {
|
||||||
|
|
||||||
|
section.setAttribute( 'data-markdown-parsed', true )
|
||||||
|
|
||||||
|
var notes = section.querySelector( 'aside.notes' );
|
||||||
|
var markdown = getMarkdownFromSlide( section );
|
||||||
|
|
||||||
|
section.innerHTML = marked( markdown );
|
||||||
|
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
||||||
|
section.parentNode.getAttribute( 'data-element-attributes' ) ||
|
||||||
|
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
||||||
|
section.getAttribute( 'data-attributes' ) ||
|
||||||
|
section.parentNode.getAttribute( 'data-attributes' ) ||
|
||||||
|
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
||||||
|
|
||||||
|
// If there were notes, we need to re-add them after
|
||||||
|
// having overwritten the section's HTML
|
||||||
|
if( notes ) {
|
||||||
|
section.appendChild( notes );
|
||||||
|
}
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
return Promise.resolve();
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
return {
|
||||||
* Converts any current data-markdown slides in the
|
id: 'markdown',
|
||||||
* DOM to HTML.
|
|
||||||
*/
|
|
||||||
function convertSlides() {
|
|
||||||
|
|
||||||
var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
/**
|
||||||
|
* Starts processing and converting Markdown within the
|
||||||
|
* current reveal.js deck.
|
||||||
|
*/
|
||||||
|
init: function( reveal ) {
|
||||||
|
|
||||||
[].slice.call( sections ).forEach( function( section ) {
|
deck = reveal;
|
||||||
|
|
||||||
section.setAttribute( 'data-markdown-parsed', true )
|
// This should no longer be needed, as long as the highlight.js
|
||||||
|
// plugin is included after the markdown plugin
|
||||||
|
// if( typeof window.hljs !== 'undefined' ) {
|
||||||
|
// marked.setOptions({
|
||||||
|
// highlight: function( code, lang ) {
|
||||||
|
// return window.hljs.highlightAuto( code, lang ? [lang] : null ).value;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
var notes = section.querySelector( 'aside.notes' );
|
// marked can be configured via reveal.js config options
|
||||||
var markdown = getMarkdownFromSlide( section );
|
var options = deck.getConfig().markdown;
|
||||||
|
if( options ) {
|
||||||
|
marked.setOptions( options );
|
||||||
|
}
|
||||||
|
|
||||||
section.innerHTML = marked( markdown );
|
return processSlides( deck.getRevealElement() ).then( convertSlides );
|
||||||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
|
||||||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
|
|
||||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
|
||||||
section.getAttribute( 'data-attributes' ) ||
|
|
||||||
section.parentNode.getAttribute( 'data-attributes' ) ||
|
|
||||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
|
||||||
|
|
||||||
// If there were notes, we need to re-add them after
|
},
|
||||||
// having overwritten the section's HTML
|
|
||||||
if( notes ) {
|
|
||||||
section.appendChild( notes );
|
|
||||||
}
|
|
||||||
|
|
||||||
} );
|
// TODO: Do these belong in the API?
|
||||||
|
processSlides: processSlides,
|
||||||
|
convertSlides: convertSlides,
|
||||||
|
slidify: slidify,
|
||||||
|
marked: marked
|
||||||
|
}
|
||||||
|
|
||||||
return Promise.resolve();
|
};
|
||||||
|
|
||||||
}
|
export default Plugin;
|
||||||
|
|
|
@ -4,14 +4,12 @@
|
||||||
*
|
*
|
||||||
* @author Hakim El Hattab
|
* @author Hakim El Hattab
|
||||||
*/
|
*/
|
||||||
let Plugin = (function(){
|
const Plugin = () => {
|
||||||
|
|
||||||
var options = Reveal.getConfig().math || {};
|
// The reveal.js instance this plugin is attached to
|
||||||
var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
let deck;
|
||||||
var config = options.config || 'TeX-AMS_HTML-full';
|
|
||||||
var url = mathjax + '?config=' + config;
|
|
||||||
|
|
||||||
var defaultOptions = {
|
let defaultOptions = {
|
||||||
messageStyle: 'none',
|
messageStyle: 'none',
|
||||||
tex2jax: {
|
tex2jax: {
|
||||||
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
||||||
|
@ -20,25 +18,15 @@ let Plugin = (function(){
|
||||||
skipStartupTypeset: true
|
skipStartupTypeset: true
|
||||||
};
|
};
|
||||||
|
|
||||||
function defaults( options, defaultOptions ) {
|
|
||||||
|
|
||||||
for ( var i in defaultOptions ) {
|
|
||||||
if ( !options.hasOwnProperty( i ) ) {
|
|
||||||
options[i] = defaultOptions[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadScript( url, callback ) {
|
function loadScript( url, callback ) {
|
||||||
|
|
||||||
var head = document.querySelector( 'head' );
|
let head = document.querySelector( 'head' );
|
||||||
var script = document.createElement( 'script' );
|
let script = document.createElement( 'script' );
|
||||||
script.type = 'text/javascript';
|
script.type = 'text/javascript';
|
||||||
script.src = url;
|
script.src = url;
|
||||||
|
|
||||||
// Wrapper for callback to make sure it only fires once
|
// Wrapper for callback to make sure it only fires once
|
||||||
var finish = function() {
|
let finish = () => {
|
||||||
if( typeof callback === 'function' ) {
|
if( typeof callback === 'function' ) {
|
||||||
callback.call();
|
callback.call();
|
||||||
callback = null;
|
callback = null;
|
||||||
|
@ -48,7 +36,7 @@ let Plugin = (function(){
|
||||||
script.onload = finish;
|
script.onload = finish;
|
||||||
|
|
||||||
// IE
|
// IE
|
||||||
script.onreadystatechange = function() {
|
script.onreadystatechange = () => {
|
||||||
if ( this.readyState === 'loaded' ) {
|
if ( this.readyState === 'loaded' ) {
|
||||||
finish();
|
finish();
|
||||||
}
|
}
|
||||||
|
@ -62,10 +50,19 @@ let Plugin = (function(){
|
||||||
return {
|
return {
|
||||||
id: 'math',
|
id: 'math',
|
||||||
|
|
||||||
init: function( deck ) {
|
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 };
|
||||||
|
|
||||||
defaults( options, defaultOptions );
|
|
||||||
defaults( options.tex2jax, defaultOptions.tex2jax );
|
|
||||||
options.mathjax = options.config = null;
|
options.mathjax = options.config = null;
|
||||||
|
|
||||||
loadScript( url, function() {
|
loadScript( url, function() {
|
||||||
|
@ -74,7 +71,7 @@ let Plugin = (function(){
|
||||||
|
|
||||||
// Typeset followed by an immediate reveal.js layout since
|
// Typeset followed by an immediate reveal.js layout since
|
||||||
// the typesetting process could affect slide height
|
// the typesetting process could affect slide height
|
||||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
|
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, deck.getRevealElement() ] );
|
||||||
MathJax.Hub.Queue( deck.layout );
|
MathJax.Hub.Queue( deck.layout );
|
||||||
|
|
||||||
// Reprocess equations in slides when they turn visible
|
// Reprocess equations in slides when they turn visible
|
||||||
|
@ -89,6 +86,6 @@ let Plugin = (function(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
};
|
||||||
|
|
||||||
export default () => Plugin;
|
export default Plugin;
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue