markdown.html - reveal.js

markdown.html

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8" />
5
6	<title>reveal.js - Markdown Example</title>
7
8	<link rel="stylesheet" href="../dist/reveal.css" />
9	<link rel="stylesheet" href="../dist/theme/white.css" id="theme" />
10
11	<link rel="stylesheet" href="../dist/plugin/highlight/monokai.css" />
12	</head>
13
14	<body>
15	<div class="reveal">
16	<div class="slides">
17	<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
18	<section
19	data-markdown="markdown.md"
20	data-separator="^\n\n\n"
21	data-separator-vertical="^\n\n"
22	></section>
23
24	<!-- Slides are separated by three dashes (the default) -->
25	<section data-markdown>
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 regexp matching 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 the separator can't be matched ("---" will become horizontal rulers) -->
57	<section data-markdown data-separator="$x">
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 [1\|3-5]
92	public function foo()
93	{
94	$foo = array(
95	'bar' => 'bar'
96	)
97	}
98	```
99	</script>
100	</section>
101
102	<!-- add optional line count offset, in this case 287 -->
103	<section data-markdown>
104	<script type="text/template">
105	## echo.c
106
107	```c [287: 2\|4,6]
108	/* All of the options in this arg are valid, so handle them. */
109	p = arg + 1;
110	do {
111	if (*p == 'n')
112	nflag = 0;
113	if (*p == 'e')
114	eflag = '\\';
115	} while (*++p);
116	```
117	[source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
118	</script>
119	</section>
120
121	<!-- Images -->
122	<section data-markdown>
123	<script type="text/template">
124	![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
125	</script>
126	</section>
127
128	<!-- Math, prettier-ignore -->
129	<!-- prettier-ignore -->
130	<section data-markdown>
131	## The Lorenz Equations
132	$$\begin{aligned}
133	\dot{x} & = \sigma(y-x) \\
134	\dot{y} & = \rho x - y - xz \\
135	\dot{z} & = -\beta z + xy
136	\end{aligned}$$
137	</section>
138
139	<!-- Smartypants -->
140	<section data-markdown>
141	Turn quotation marks into "curly" 'quotes' with smartypants.
142	```javascript
143	Reveal.initialize({
144	markdown: {
145	smartypants: true,
146	},
147	});
148	```
149	</section>
150	</div>
151	</div>
152
153	<script src="../dist/reveal.js"></script>
154	<script src="../dist/reveal.js"></script>
155	<script src="../dist/plugin/markdown.js"></script>
156	<script src="../dist/plugin/highlight.js"></script>
157	<script src="../dist/plugin/notes.js"></script>
158	<script src="../dist/plugin/math.js"></script>
159
160	<script>
161	Reveal.initialize({
162	controls: true,
163	progress: true,
164	history: true,
165	center: true,
166
167	markdown: {
168	smartypants: true,
169	},
170
171	plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX],
172	});
173	</script>
174	</body>
175	</html>
176

176 lines HTML