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                        ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
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>
135