blob: 36f6a5102a4f2b3280c0015e9755646e483e3556 [file] [log] [blame]
JJ Allaireefa6ad42016-01-30 13:12:05 -05001<!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/zenburn.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 </div>
103 </div>
104
105 <script src="../../lib/js/head.min.js"></script>
106 <script src="../../js/reveal.js"></script>
107
108 <script>
109
110 Reveal.initialize({
111 controls: true,
112 progress: true,
113 history: true,
114 center: true,
115
116 // Optional libraries used to extend on reveal.js
117 dependencies: [
118 { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
119 { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
120 { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
121 { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
122 { src: '../notes/notes.js' }
123 ]
124 });
125
126 </script>
127
128 </body>
129</html>