example.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Markdown Demo</title>
  6. <link rel="stylesheet" href="../../css/reveal.css">
  7. <link rel="stylesheet" href="../../css/theme/default.css" id="theme">
  8. </head>
  9. <body>
  10. <div class="reveal">
  11. <div class="slides">
  12. <!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines -->
  13. <section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
  14. <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
  15. <section data-markdown data-separator="---">
  16. <script type="text/template">
  17. ## Demo 1
  18. Slide 1
  19. ---
  20. ## Demo 1
  21. Slide 2
  22. ---
  23. ## Demo 1
  24. Slide 3
  25. </script>
  26. </section>
  27. <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
  28. <section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$">
  29. <script type="text/template">
  30. ## Demo 2
  31. Slide 1.1
  32. --
  33. ## Demo 2
  34. Slide 1.2
  35. ---
  36. ## Demo 2
  37. Slide 2
  38. </script>
  39. </section>
  40. <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
  41. <section data-markdown>
  42. <script type="text/template">
  43. A
  44. ---
  45. B
  46. ---
  47. C
  48. </script>
  49. </section>
  50. </div>
  51. </div>
  52. <script src="../../lib/js/head.min.js"></script>
  53. <script src="../../js/reveal.js"></script>
  54. <script>
  55. Reveal.initialize({
  56. controls: true,
  57. progress: true,
  58. history: true,
  59. center: true,
  60. theme: Reveal.getQueryHash().theme,
  61. transition: Reveal.getQueryHash().transition || 'default',
  62. // Optional libraries used to extend on reveal.js
  63. dependencies: [
  64. { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
  65. { src: 'showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
  66. { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
  67. ]
  68. });
  69. </script>
  70. </body>
  71. </html>