multiple-presentations.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Multiple Presentations</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <link rel="stylesheet" href="../dist/reveal.css">
  8. <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
  9. <link rel="stylesheet" href="../plugin/highlight/monokai.css">
  10. </head>
  11. <body style="background: #ddd;">
  12. <div style="display: flex; flex-direction: row;">
  13. <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;">
  14. <div class="slides">
  15. <section>Deck 1, Slide 1</section>
  16. <section>Deck 1, Slide 2</section>
  17. <section>
  18. <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
  19. import React, { useState } from 'react';
  20. function Example() {
  21. const [count, setCount] = useState(0);
  22. }
  23. </code></pre>
  24. </section>
  25. </div>
  26. </div>
  27. <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;">
  28. <div class="slides">
  29. <section>Deck 2, Slide 1</section>
  30. <section>Deck 2, Slide 2</section>
  31. <section data-markdown>
  32. <script type="text/template">
  33. ## Markdown plugin
  34. - 1
  35. - 2
  36. - 3
  37. </script>
  38. </section>
  39. <section>
  40. <h3>The Lorenz Equations</h3>
  41. \[\begin{aligned}
  42. \dot{x} &amp; = \sigma(y-x) \\
  43. \dot{y} &amp; = \rho x - y - xz \\
  44. \dot{z} &amp; = -\beta z + xy
  45. \end{aligned} \]
  46. </section>
  47. </div>
  48. </div>
  49. </div>
  50. <style>
  51. .reveal {
  52. border: 4px solid #ccc;
  53. }
  54. .reveal.focused {
  55. border-color: #94b5ff;
  56. }
  57. </style>
  58. <script src="../dist/reveal.js"></script>
  59. <script src="../plugin/highlight/highlight.js"></script>
  60. <script src="../plugin/markdown/markdown.js"></script>
  61. <script src="../plugin/math/math.js"></script>
  62. <script>
  63. let deck1 = new Reveal( document.querySelector( '.deck1' ), {
  64. embedded: true,
  65. progress: false,
  66. keyboardCondition: 'focused',
  67. plugins: [ RevealHighlight ]
  68. } );
  69. deck1.on( 'slidechanged', () => {
  70. console.log( 'Deck 1 slide changed' );
  71. } );
  72. deck1.initialize();
  73. let deck2 = new Reveal( document.querySelector( '.deck2' ), {
  74. embedded: true,
  75. progress: false,
  76. keyboardCondition: 'focused',
  77. plugins: [ RevealMarkdown, RevealMath ]
  78. } );
  79. deck2.initialize().then( () => {
  80. deck2.slide(1);
  81. } );
  82. deck2.on( 'slidechanged', () => {
  83. console.log( 'Deck 2 slide changed' );
  84. } );
  85. </script>
  86. </body>
  87. </html>