example.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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="../../dist/reveal.css">
  7. <link rel="stylesheet" href="../../dist/theme/white.css" id="theme">
  8. <link rel="stylesheet" href="../../lib/css/monokai.css">
  9. </head>
  10. <body>
  11. <div class="reveal">
  12. <div class="slides">
  13. <section data-markdown>
  14. ```php
  15. public function foo()
  16. {
  17. $foo = array(
  18. 'bar' => 'bar'
  19. )
  20. }
  21. ```
  22. </section>
  23. <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
  24. <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
  25. <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
  26. <section data-markdown data-separator="---">
  27. <script type="text/template">
  28. ## Demo 1
  29. Slide 1
  30. ---
  31. ## Demo 1
  32. Slide 2
  33. ---
  34. ## Demo 1
  35. Slide 3
  36. </script>
  37. </section>
  38. <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
  39. <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
  40. <script type="text/template">
  41. ## Demo 2
  42. Slide 1.1
  43. --
  44. ## Demo 2
  45. Slide 1.2
  46. ---
  47. ## Demo 2
  48. Slide 2
  49. </script>
  50. </section>
  51. <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
  52. <section data-markdown>
  53. <script type="text/template">
  54. A
  55. ---
  56. B
  57. ---
  58. C
  59. </script>
  60. </section>
  61. <!-- Slide attributes -->
  62. <section data-markdown>
  63. <script type="text/template">
  64. <!-- .slide: data-background="#000000" -->
  65. ## Slide attributes
  66. </script>
  67. </section>
  68. <!-- Element attributes -->
  69. <section data-markdown>
  70. <script type="text/template">
  71. ## Element attributes
  72. - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
  73. - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  74. </script>
  75. </section>
  76. <!-- Code -->
  77. <section data-markdown>
  78. <script type="text/template">
  79. ```php
  80. public function foo()
  81. {
  82. $foo = array(
  83. 'bar' => 'bar'
  84. )
  85. }
  86. ```
  87. </script>
  88. </section>
  89. <!-- Images -->
  90. <section data-markdown>
  91. <script type="text/template">
  92. ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
  93. </script>
  94. </section>
  95. </div>
  96. </div>
  97. <script src="../../dist/reveal.min.js"></script>
  98. <script>
  99. Reveal.initialize({
  100. controls: true,
  101. progress: true,
  102. history: true,
  103. center: true,
  104. // Optional libraries used to extend on reveal.js
  105. dependencies: [
  106. { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
  107. { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
  108. { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
  109. { src: '../notes/notes.js' }
  110. ]
  111. });
  112. </script>
  113. </body>
  114. </html>