markdown.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>reveal.js - Markdown Example</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="../dist/plugin/highlight/monokai.css" />
  9. </head>
  10. <body>
  11. <div class="reveal">
  12. <div class="slides">
  13. <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
  14. <section
  15. data-markdown="markdown.md"
  16. data-separator="^\n\n\n"
  17. data-separator-vertical="^\n\n"
  18. ></section>
  19. <!-- Slides are separated by three dashes (the default) -->
  20. <section data-markdown>
  21. <script type="text/template">
  22. ## Demo 1
  23. Slide 1
  24. ---
  25. ## Demo 1
  26. Slide 2
  27. ---
  28. ## Demo 1
  29. Slide 3
  30. </script>
  31. </section>
  32. <!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
  33. <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
  34. <script type="text/template">
  35. ## Demo 2
  36. Slide 1.1
  37. --
  38. ## Demo 2
  39. Slide 1.2
  40. ---
  41. ## Demo 2
  42. Slide 2
  43. </script>
  44. </section>
  45. <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
  46. <section data-markdown data-separator="$x">
  47. <script type="text/template">
  48. A
  49. ---
  50. B
  51. ---
  52. C
  53. </script>
  54. </section>
  55. <!-- Slide attributes -->
  56. <section data-markdown>
  57. <script type="text/template">
  58. <!-- .slide: data-background="#000000" -->
  59. ## Slide attributes
  60. </script>
  61. </section>
  62. <!-- Element attributes -->
  63. <section data-markdown>
  64. <script type="text/template">
  65. ## Element attributes
  66. - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
  67. - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  68. </script>
  69. </section>
  70. <!-- Code -->
  71. <section data-markdown>
  72. <script type="text/template">
  73. ```php [1|3-5]
  74. public function foo()
  75. {
  76. $foo = array(
  77. 'bar' => 'bar'
  78. )
  79. }
  80. ```
  81. </script>
  82. </section>
  83. <!-- add optional line count offset, in this case 287 -->
  84. <section data-markdown>
  85. <script type="text/template">
  86. ## echo.c
  87. ```c [287: 2|4,6]
  88. /* All of the options in this arg are valid, so handle them. */
  89. p = arg + 1;
  90. do {
  91. if (*p == 'n')
  92. nflag = 0;
  93. if (*p == 'e')
  94. eflag = '\\';
  95. } while (*++p);
  96. ```
  97. [source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
  98. </script>
  99. </section>
  100. <!-- Images -->
  101. <section data-markdown>
  102. <script type="text/template">
  103. ![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
  104. </script>
  105. </section>
  106. <!-- Math, prettier-ignore -->
  107. <!-- prettier-ignore -->
  108. <section data-markdown>
  109. ## The Lorenz Equations
  110. `\[\begin{aligned}
  111. \dot{x} &amp; = \sigma(y-x) \\
  112. \dot{y} &amp; = \rho x - y - xz \\
  113. \dot{z} &amp; = -\beta z + xy
  114. \end{aligned} \]`
  115. </section>
  116. </div>
  117. </div>
  118. <script src="../dist/reveal.js"></script>
  119. <script src="../dist/reveal.js"></script>
  120. <script src="../dist/plugin/markdown.js"></script>
  121. <script src="../dist/plugin/highlight.js"></script>
  122. <script src="../dist/plugin/notes.js"></script>
  123. <script src="../dist/plugin/math.js"></script>
  124. <script>
  125. Reveal.initialize({
  126. controls: true,
  127. progress: true,
  128. history: true,
  129. center: true,
  130. plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX],
  131. });
  132. </script>
  133. </body>
  134. </html>