github.com/mweagle/Sparta@v1.15.0/docs_source/static/presentations/reveal.js-3.9.2/plugin/markdown/example.html (about) 1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 7 <title>reveal.js - Markdown Demo</title> 8 9 <link rel="stylesheet" href="../../css/reveal.css"> 10 <link rel="stylesheet" href="../../css/theme/white.css" id="theme"> 11 12 <link rel="stylesheet" href="../../lib/css/monokai.css"> 13 </head> 14 15 <body> 16 17 <div class="reveal"> 18 19 <div class="slides"> 20 21 <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines --> 22 <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> 23 24 <!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> 25 <section data-markdown data-separator="---"> 26 <script type="text/template"> 27 ## Demo 1 28 Slide 1 29 --- 30 ## Demo 1 31 Slide 2 32 --- 33 ## Demo 1 34 Slide 3 35 </script> 36 </section> 37 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 -- 45 46 ## Demo 2 47 Slide 1.2 48 49 --- 50 51 ## Demo 2 52 Slide 2 53 </script> 54 </section> 55 56 <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) --> 57 <section data-markdown> 58 <script type="text/template"> 59 A 60 61 --- 62 63 B 64 65 --- 66 67 C 68 </script> 69 </section> 70 71 <!-- Slide attributes --> 72 <section data-markdown> 73 <script type="text/template"> 74 <!-- .slide: data-background="#000000" --> 75 ## Slide attributes 76 </script> 77 </section> 78 79 <!-- Element attributes --> 80 <section data-markdown> 81 <script type="text/template"> 82 ## Element attributes 83 - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> 84 - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> 85 </script> 86 </section> 87 88 <!-- Code --> 89 <section data-markdown> 90 <script type="text/template"> 91 ```php 92 public function foo() 93 { 94 $foo = array( 95 'bar' => 'bar' 96 ) 97 } 98 ``` 99 </script> 100 </section> 101 102 <!-- Images --> 103 <section data-markdown> 104 <script type="text/template"> 105  106 </script> 107 </section> 108 109 </div> 110 </div> 111 112 <script src="../../js/reveal.js"></script> 113 114 <script> 115 116 Reveal.initialize({ 117 controls: true, 118 progress: true, 119 history: true, 120 center: true, 121 122 // Optional libraries used to extend on reveal.js 123 dependencies: [ 124 { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 125 { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, 126 { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, 127 { src: '../notes/notes.js' } 128 ] 129 }); 130 131 </script> 132 133 </body> 134 </html>