Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 8afae13d17239edd07e72fd2009094493371d4c3 / . / inst / reveal.js-4.2.1 / test / test-markdown.html
blob: b0ead9c5322e514dc4662b6fec2403fbe5bad456 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Test Markdown</title>
8
9 <link rel="stylesheet" href="../dist/reveal.css">
10 <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
11 <script src="../node_modules/qunit/qunit/qunit.js"></script>
12 </head>
13
14 <body style="overflow: auto;">
15
16 <div id="qunit"></div>
17 <div id="qunit-fixture"></div>
18
19 <div class="reveal deck1" style="display: none;">
20 <div class="slides">
21 <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
22 <script type="text/template">
23 ## Slide 1.1
24
25 --
26
27 ## Slide 1.2
28
29 ---
30
31 ## Slide 2
32 </script>
33 </section>
34 </div>
35 </div>
36
37 <div class="reveal deck2" style="display: none;">
38 <div class="slides">
39 <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section>
40 </div>
41 </div>
42
43 <div class="reveal deck3" style="display: none;">
44 <div class="slides">
45 <section data-markdown data-separator="^\n\n\n"
46 data-separator-vertical="^\n\n"
47 data-separator-notes="^Note:"
48 data-attributes="--\s(.*?)$"
49 data-charset="utf-8">
50 <script type="text/template">
51 # Test attributes in Markdown
52 ## Slide 1
53
54
55
56 ## Slide 2
57 <!-- -- id="slide2" data-transition="zoom" data-background="#A0C66B" -->
58
59
60 ## Slide 2.1
61 <!-- -- data-background="#ff0000" data-transition="fade" -->
62
63
64 ## Slide 2.2
65 [Link to Slide2](#/slide2)
66
67
68
69 ## Slide 3
70 <!-- -- data-transition="zoom" data-background="#C6916B" -->
71
72
73
74 ## Slide 4
75 </script>
76 </section>
77
78 <section data-markdown data-separator="^\n\n\n"
79 data-separator-vertical="^\n\n"
80 data-separator-notes="^Note:"
81 data-charset="utf-8">
82 <script type="text/template">
83 # Test attributes in Markdown with default separator
84 ## Slide 1 Def
85
86
87
88 ## Slide 2 Def
89 <!-- .slide: id="slide2def" data-transition="concave" data-background="#A7C66B" -->
90
91
92 ## Slide 2.1 Def
93 <!-- .slide: data-background="#f70000" data-transition="page" -->
94
95
96 ## Slide 2.2 Def
97 [Link to Slide2](#/slide2def)
98
99
100
101 ## Slide 3 Def
102 <!-- .slide: data-transition="concave" data-background="#C7916B" -->
103
104
105
106 ## Slide 4
107 </script>
108 </section>
109
110 <section data-markdown>
111 <script type="text/template">
112 <!-- .slide: data-background="#ff0000" -->
113 ## Hello world
114 </script>
115 </section>
116
117 <section data-markdown>
118 <script type="text/template">
119 ## Hello world
120 <!-- .slide: data-background="#ff0000" -->
121 </script>
122 </section>
123
124 <section data-markdown>
125 <script type="text/template">
126 ## Hello world
127
128 Test
129 <!-- .slide: data-background="#ff0000" -->
130
131 More Test
132 </script>
133 </section>
134 </div>
135 </div>
136
137 <div class="reveal deck4" style="display: none;">
138 <div class="slides">
139 <section data-markdown>
140 <script type="text/template">
141 ## Testing Markdown Options
142
143 This "slide" should contain 'smart' quotes.
144 </script>
145 </section>
146 </div>
147 </div>
148
149 <div class="reveal deck5" style="display: none;">
150 <div class="slides">
151 <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$" data-element-attributes="{_\s*?([^}]+?)}">>
152 <script type="text/template">
153 ## Slide 1.1
154 <!-- {_class="fragment fade-out" data-fragment-index="1"} -->
155
156 --
157
158 ## Slide 1.2
159 <!-- {_class="fragment shrink"} -->
160
161 Paragraph 1
162 <!-- {_class="fragment grow"} -->
163
164 Paragraph 2
165 <!-- {_class="fragment grow"} -->
166
167 - list item 1 <!-- {_class="fragment grow"} -->
168 - list item 2 <!-- {_class="fragment grow"} -->
169 - list item 3 <!-- {_class="fragment grow"} -->
170
171
172 ---
173
174 ## Slide 2
175
176
177 Paragraph 1.2
178 multi-line <!-- {_class="fragment highlight-red"} -->
179
180 Paragraph 2.2 <!-- {_class="fragment highlight-red"} -->
181
182 Paragraph 2.3 <!-- {_class="fragment highlight-red"} -->
183
184 Paragraph 2.4 <!-- {_class="fragment highlight-red"} -->
185
186 - list item 1 <!-- {_class="fragment highlight-green"} -->
187 - list item 2<!-- {_class="fragment highlight-green"} -->
188 - list item 3<!-- {_class="fragment highlight-green"} -->
189 - list item 4
190 <!-- {_class="fragment highlight-green"} -->
191 - list item 5<!-- {_class="fragment highlight-green"} -->
192
193 Test
194
195 ![Example Picture](examples/assets/image2.png) <!-- {_class="reveal stretch"} -->
196
197 </script>
198 </section>
199
200
201
202 <section data-markdown data-separator="^\n\n\n"
203 data-separator-vertical="^\n\n"
204 data-separator-notes="^Note:"
205 data-charset="utf-8">
206 <script type="text/template">
207 # Test attributes in Markdown with default separator
208 ## Slide 1 Def <!-- .element: class="fragment highlight-red" data-fragment-index="1" -->
209
210
211 ## Slide 2 Def
212 <!-- .element: class="fragment highlight-red" -->
213
214 </script>
215 </section>
216
217 <section data-markdown>
218 <script type="text/template">
219 ## Hello world
220 A paragraph
221 <!-- .element: class="fragment highlight-blue" -->
222 </script>
223 </section>
224
225 <section data-markdown>
226 <script type="text/template">
227 ## Hello world
228
229 Multiple
230 Line
231 <!-- .element: class="fragment highlight-blue" -->
232 </script>
233 </section>
234
235 <section data-markdown>
236 <script type="text/template">
237 ## Hello world
238
239 Test<!-- .element: class="fragment highlight-blue" -->
240
241 More Test
242 </script>
243 </section>
244 </div>
245 </div>
246
247 <div class="reveal deck6" style="display: block;">
248 <div class="slides">
249 <section data-markdown class="defaults">
250 <script type="text/template">
251 ```
252 code
253 ```
254 </script>
255 </section>
256 <section data-markdown class="with-language">
257 <script type="text/template">
258 ```javascript
259 code
260 ```
261 </script>
262 </section>
263 <section data-markdown class="with-line-numbers">
264 <script type="text/template">
265 ```[]
266 code
267 ```
268 </script>
269 </section>
270 <section data-markdown class="with-line-highlights">
271 <script type="text/template">
272 ```[1,2,3]
273 code
274 ```
275 </script>
276 </section>
277 <section data-markdown class="with-line-highlights-and-lanugage">
278 <script type="text/template">
279 ```javascript [1,2,3]
280 code
281 ```
282 </script>
283 </section>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]284 <section data-markdown class="with-code-in-fragment">
285 <script type="text/template">
286 ```js
287 foo.bar();
288 ```
289
290 <!-- .element: class="fragment" -->
291 </script>
292 </section>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]293 </div>
294 </div>
295
296 <script type="module">
297 import Reveal from '../dist/reveal.esm.js'
298 import Markdown from '../plugin/markdown/markdown.esm.js'
299 import Highlight from '../plugin/highlight/highlight.esm.js'
300
301 let deck1 = new Reveal( document.querySelector( '.deck1' ), { plugins: [ Markdown ] })
302 deck1.addEventListener( 'ready', function() {
303
304 QUnit.module( 'Inline' );
305
306 QUnit.test( 'Vertical separator', function( assert ) {
307 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
308 });
309
310 QUnit.test( 'Horizontal separator', function( assert ) {
311 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
312 });
313
314 } );
315
316 let deck2 = new Reveal( document.querySelector( '.deck2' ), { plugins: [ Markdown ] })
317 deck2.addEventListener( 'ready', function() {
318
319 QUnit.module( 'External' );
320
321 QUnit.test( 'Vertical separator', function( assert ) {
322 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
323 });
324
325 QUnit.test( 'Horizontal separator', function( assert ) {
326 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
327 });
328
329 } );
330
331 let deck3 = new Reveal( document.querySelector( '.deck3' ), { plugins: [ Markdown ] })
332 deck3.addEventListener( 'ready', function() {
333
334 QUnit.module( 'Slide Attributes' );
335
336 QUnit.test( 'Id on slide', function( assert ) {
337 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
338 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
339 });
340
341 QUnit.test( 'data-background attributes', function( assert ) {
342 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
343 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
344 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
345 });
346
347 QUnit.test( 'data-transition attributes', function( assert ) {
348 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
349 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
350 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
351 });
352
353 QUnit.test( 'data-background attributes with default separator', function( assert ) {
354 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
355 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
356 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
357 });
358
359 QUnit.test( 'data-transition attributes with default separator', function( assert ) {
360 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
361 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
362 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
363 });
364
365 QUnit.test( 'data-transition attributes with inline content', function( assert ) {
366 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
367 });
368
369 } );
370
371 let deck4 = new Reveal( document.querySelector( '.deck4' ), {
372 markdown: {
373 smartypants: true
374 },
375 plugins: [ Markdown ]
376 })
377 deck4.addEventListener( 'ready', function() {
378
379 QUnit.module( 'Options' );
380
381 QUnit.test( 'Options are set', function( assert ) {
382 assert.strictEqual( deck4.getPlugin( 'markdown' ).marked.defaults.smartypants, true );
383 });
384
385 QUnit.test( 'Smart quotes are activated', function( assert ) {
386 var text = deck4.getRevealElement().querySelector( '.reveal .slides>section>p' ).textContent;
387
388 assert.strictEqual( /['"]/.test( text ), false );
389 assert.strictEqual( /[“”‘’]/.test( text ), true );
390 });
391
392 } );
393
394 let deck5 = new Reveal( document.querySelector( '.deck5' ), { plugins: [ Markdown ] })
395 deck5.addEventListener( 'ready', function() {
396
397 QUnit.module( 'Element Attributes' );
398
399 QUnit.test( 'Vertical separator', function( assert ) {
400 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
401 });
402
403 QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
404 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
405 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
406 });
407
408 QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
409 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
410 });
411
412 QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
413 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
414 });
415
416 QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
417 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
418 });
419
420 QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
421 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
422 });
423
424 QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
425 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
426 });
427
428 QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
429 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
430 });
431
432 QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
433 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
434 });
435
436 } );
437
438 let deck6 = new Reveal( document.querySelector( '.deck6' ), {
439 plugins: [ Markdown, Highlight ]
440 })
441 deck6.addEventListener( 'ready', function() {
442
443 QUnit.module( 'Code Blocks' );
444
445 QUnit.test( 'Defaults to no line numbers', function( assert ) {
446 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.defaults .hljs:not([data-line-numbers])' ).length, 1 );
447 });
448
449 QUnit.test( 'Can set language', function( assert ) {
450 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-language .hljs.javascript:not([data-line-numbers])' ).length, 1 );
451 });
452
453 QUnit.test( '```[] enables line numbers', function( assert ) {
454 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-numbers .hljs[data-line-numbers=""]' ).length, 1 );
455 });
456
457 QUnit.test( '```[1,2,3] enables line highlights', function( assert ) {
458 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
459 });
460
461 QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
462 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
463 });
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]464
465 QUnit.test( '```block should allow custom fragment', function( assert ) {
466 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
467 });
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]468
469 } );
470
471 deck1.initialize();
472 deck2.initialize();
473 deck3.initialize();
474 deck4.initialize();
475 deck5.initialize();
476 deck6.initialize();
477 </script>
478
479 </body>
480</html>