<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js - Multiple Presentations</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="../dist/reveal.css"> <link rel="stylesheet" href="../dist/theme/white.css" id="theme"> <link rel="stylesheet" href="../plugin/highlight/monokai.css"> </head> <body style="background: #ddd;"> <div style="display: flex; flex-direction: row;"> <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;"> <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> <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;"> <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> <style> .reveal { border: 4px solid #ccc; } .reveal.focused { border-color: #94b5ff; } </style> <script src="../dist/reveal.js"></script> <script src="../plugin/highlight/highlight.js"></script> <script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/math/math.js"></script> <script> let deck1 = new Reveal( document.querySelector( '.deck1' ), { embedded: true, progress: false, keyboardCondition: 'focused', plugins: [ RevealHighlight ] } ); deck1.on( 'slidechanged', () => { console.log( 'Deck 1 slide changed' ); } ); deck1.initialize(); let deck2 = new Reveal( document.querySelector( '.deck2' ), { embedded: true, progress: false, keyboardCondition: 'focused', plugins: [ RevealMarkdown, RevealMath ] } ); deck2.initialize().then( () => { deck2.slide(1); } ); deck2.on( 'slidechanged', () => { console.log( 'Deck 2 slide changed' ); } ); </script> </body> </html>