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/theme/white.css" id="theme">
|
||||
<link rel="stylesheet" href="../lib/css/monokai.css">
|
||||
</head>
|
||||
|
||||
<body style="background: #ddd;">
|
||||
|
@ -19,6 +20,14 @@
|
|||
<div class="slides">
|
||||
<section>Deck 1, Slide 1</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>
|
||||
|
||||
|
@ -26,16 +35,38 @@
|
|||
<div class="slides">
|
||||
<section>Deck 2, Slide 1</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>
|
||||
|
||||
<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>
|
||||
|
||||
let deck1 = new Reveal( document.querySelector( '.deck1' ), {
|
||||
embedded: true,
|
||||
keyboard: false
|
||||
keyboard: false,
|
||||
plugins: [ RevealHighlight ]
|
||||
} );
|
||||
deck1.on( 'slidechanged', () => {
|
||||
console.log( 'Deck 1 slide changed' );
|
||||
|
@ -44,7 +75,8 @@
|
|||
|
||||
let deck2 = new Reveal( document.querySelector( '.deck2' ), {
|
||||
embedded: true,
|
||||
keyboard: false
|
||||
keyboard: true,
|
||||
plugins: [ RevealMarkdown, RevealMath ]
|
||||
} );
|
||||
deck2.initialize().then( () => {
|
||||
deck2.slide(1);
|
||||
|
|
|
@ -13,14 +13,22 @@ let Plugin = {
|
|||
HIGHLIGHT_LINE_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
|
||||
var config = deck.getConfig().highlight || {};
|
||||
var config = reveal.getConfig().highlight || {};
|
||||
config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : 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
|
||||
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
|
||||
// all blocks in the deck into view at once
|
||||
deck.on( 'pdf-ready', function() {
|
||||
[].slice.call( document.querySelectorAll( '.reveal pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
|
||||
reveal.on( 'pdf-ready', function() {
|
||||
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code[data-line-numbers].current-fragment' ) ).forEach( function( block ) {
|
||||
Plugin.scrollHighlightedLineIntoView( block, {}, true );
|
||||
} );
|
||||
} );
|
||||
|
|
|
@ -6,53 +6,17 @@
|
|||
|
||||
import marked from './marked.js'
|
||||
|
||||
let Plugin = {
|
||||
|
||||
id: 'markdown',
|
||||
|
||||
/**
|
||||
* Starts processing and converting Markdown within the
|
||||
* current reveal.js deck.
|
||||
*/
|
||||
init: function( deck ) {
|
||||
|
||||
// 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;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// marked can be configured via reveal.js config options
|
||||
var options = deck.getConfig().markdown;
|
||||
if( options ) {
|
||||
marked.setOptions( options );
|
||||
}
|
||||
|
||||
return processSlides( deck.getRevealElement() ).then( convertSlides );
|
||||
|
||||
},
|
||||
|
||||
// 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$',
|
||||
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.+?)$';
|
||||
|
||||
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||
|
||||
const Plugin = () => {
|
||||
|
||||
// The reveal.js instance this plugin is attached to
|
||||
let deck;
|
||||
|
||||
/**
|
||||
* Retrieves the markdown contents of a slide section
|
||||
|
@ -404,7 +368,7 @@ function addAttributes( section, element, previousElement, separatorElementAttri
|
|||
*/
|
||||
function convertSlides() {
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
||||
var sections = deck.getRevealElement().querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
||||
|
||||
[].slice.call( sections ).forEach( function( section ) {
|
||||
|
||||
|
@ -432,3 +396,45 @@ function convertSlides() {
|
|||
return Promise.resolve();
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
id: 'markdown',
|
||||
|
||||
/**
|
||||
* Starts processing and converting Markdown within the
|
||||
* current reveal.js deck.
|
||||
*/
|
||||
init: function( reveal ) {
|
||||
|
||||
deck = reveal;
|
||||
|
||||
// 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;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// marked can be configured via reveal.js config options
|
||||
var options = deck.getConfig().markdown;
|
||||
if( options ) {
|
||||
marked.setOptions( options );
|
||||
}
|
||||
|
||||
return processSlides( deck.getRevealElement() ).then( convertSlides );
|
||||
|
||||
},
|
||||
|
||||
// TODO: Do these belong in the API?
|
||||
processSlides: processSlides,
|
||||
convertSlides: convertSlides,
|
||||
slidify: slidify,
|
||||
marked: marked
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export default Plugin;
|
||||
|
|
|
@ -4,14 +4,12 @@
|
|||
*
|
||||
* @author Hakim El Hattab
|
||||
*/
|
||||
let Plugin = (function(){
|
||||
const Plugin = () => {
|
||||
|
||||
var options = Reveal.getConfig().math || {};
|
||||
var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
||||
var config = options.config || 'TeX-AMS_HTML-full';
|
||||
var url = mathjax + '?config=' + config;
|
||||
// The reveal.js instance this plugin is attached to
|
||||
let deck;
|
||||
|
||||
var defaultOptions = {
|
||||
let defaultOptions = {
|
||||
messageStyle: 'none',
|
||||
tex2jax: {
|
||||
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
||||
|
@ -20,25 +18,15 @@ let Plugin = (function(){
|
|||
skipStartupTypeset: true
|
||||
};
|
||||
|
||||
function defaults( options, defaultOptions ) {
|
||||
|
||||
for ( var i in defaultOptions ) {
|
||||
if ( !options.hasOwnProperty( i ) ) {
|
||||
options[i] = defaultOptions[i];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function loadScript( url, callback ) {
|
||||
|
||||
var head = document.querySelector( 'head' );
|
||||
var script = document.createElement( 'script' );
|
||||
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
|
||||
var finish = function() {
|
||||
let finish = () => {
|
||||
if( typeof callback === 'function' ) {
|
||||
callback.call();
|
||||
callback = null;
|
||||
|
@ -48,7 +36,7 @@ let Plugin = (function(){
|
|||
script.onload = finish;
|
||||
|
||||
// IE
|
||||
script.onreadystatechange = function() {
|
||||
script.onreadystatechange = () => {
|
||||
if ( this.readyState === 'loaded' ) {
|
||||
finish();
|
||||
}
|
||||
|
@ -62,10 +50,19 @@ let Plugin = (function(){
|
|||
return {
|
||||
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;
|
||||
|
||||
loadScript( url, function() {
|
||||
|
@ -74,7 +71,7 @@ let Plugin = (function(){
|
|||
|
||||
// Typeset followed by an immediate reveal.js layout since
|
||||
// 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 );
|
||||
|
||||
// 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