Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 9c036a424c275bbeebd43ac872361864546602ac / . / inst / reveal.js-5.1.0 / test / test-markdown.html
blob: e877284906df3c706ed8be8637f5011d1128b738 [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>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]277 <section data-markdown class="with-offset">
278 <script type="text/template">
279 ```[123:]
280 code
281 ```
282 </script>
283 </section>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]284 <section data-markdown class="with-line-highlights-and-lanugage">
285 <script type="text/template">
286 ```javascript [1,2,3]
287 code
288 ```
289 </script>
290 </section>
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]291 <section data-markdown class="with-line-highlights-offset-and-lanugage">
292 <script type="text/template">
293 ```javascript [456: 3,4,5]
294 code
295 ```
296 </script>
297 </section>
298 <section data-markdown class="with-line-offset-and-lanugage">
299 <script type="text/template">
300 ```javascript [756:]
301 code
302 ```
303 </script>
304 </section>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]305 <section data-markdown class="with-code-in-fragment">
306 <script type="text/template">
307 ```js
308 foo.bar();
309 ```
310
311 <!-- .element: class="fragment" -->
312 </script>
313 </section>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]314 </div>
315 </div>
316
317 <script type="module">
318 import Reveal from '../dist/reveal.esm.js'
319 import Markdown from '../plugin/markdown/markdown.esm.js'
320 import Highlight from '../plugin/highlight/highlight.esm.js'
321
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]322 QUnit.config.testTimeout = 30000;
323
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]324 let deck1 = new Reveal( document.querySelector( '.deck1' ), { plugins: [ Markdown ] })
325 deck1.addEventListener( 'ready', function() {
326
327 QUnit.module( 'Inline' );
328
329 QUnit.test( 'Vertical separator', function( assert ) {
330 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
331 });
332
333 QUnit.test( 'Horizontal separator', function( assert ) {
334 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
335 });
336
337 } );
338
339 let deck2 = new Reveal( document.querySelector( '.deck2' ), { plugins: [ Markdown ] })
340 deck2.addEventListener( 'ready', function() {
341
342 QUnit.module( 'External' );
343
344 QUnit.test( 'Vertical separator', function( assert ) {
345 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
346 });
347
348 QUnit.test( 'Horizontal separator', function( assert ) {
349 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
350 });
351
352 } );
353
354 let deck3 = new Reveal( document.querySelector( '.deck3' ), { plugins: [ Markdown ] })
355 deck3.addEventListener( 'ready', function() {
356
357 QUnit.module( 'Slide Attributes' );
358
359 QUnit.test( 'Id on slide', function( assert ) {
360 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
361 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
362 });
363
364 QUnit.test( 'data-background attributes', function( assert ) {
365 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
366 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
367 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
368 });
369
370 QUnit.test( 'data-transition attributes', function( assert ) {
371 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
372 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
373 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
374 });
375
376 QUnit.test( 'data-background attributes with default separator', function( assert ) {
377 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
378 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
379 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
380 });
381
382 QUnit.test( 'data-transition attributes with default separator', function( assert ) {
383 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
384 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
385 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
386 });
387
388 QUnit.test( 'data-transition attributes with inline content', function( assert ) {
389 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
390 });
391
392 } );
393
394 let deck4 = new Reveal( document.querySelector( '.deck4' ), {
395 markdown: {
396 smartypants: true
397 },
398 plugins: [ Markdown ]
399 })
400 deck4.addEventListener( 'ready', function() {
401
402 QUnit.module( 'Options' );
403
404 QUnit.test( 'Options are set', function( assert ) {
405 assert.strictEqual( deck4.getPlugin( 'markdown' ).marked.defaults.smartypants, true );
406 });
407
408 QUnit.test( 'Smart quotes are activated', function( assert ) {
409 var text = deck4.getRevealElement().querySelector( '.reveal .slides>section>p' ).textContent;
410
411 assert.strictEqual( /['"]/.test( text ), false );
412 assert.strictEqual( /[“”‘’]/.test( text ), true );
413 });
414
415 } );
416
417 let deck5 = new Reveal( document.querySelector( '.deck5' ), { plugins: [ Markdown ] })
418 deck5.addEventListener( 'ready', function() {
419
420 QUnit.module( 'Element Attributes' );
421
422 QUnit.test( 'Vertical separator', function( assert ) {
423 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
424 });
425
426 QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
427 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' );
428 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
429 });
430
431 QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
432 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' );
433 });
434
435 QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
436 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' );
437 });
438
439 QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
440 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' );
441 });
442
443 QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
444 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' );
445 });
446
447 QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
448 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
449 });
450
451 QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
452 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' );
453 });
454
455 QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
456 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' );
457 });
458
459 } );
460
461 let deck6 = new Reveal( document.querySelector( '.deck6' ), {
462 plugins: [ Markdown, Highlight ]
463 })
464 deck6.addEventListener( 'ready', function() {
465
466 QUnit.module( 'Code Blocks' );
467
468 QUnit.test( 'Defaults to no line numbers', function( assert ) {
469 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.defaults .hljs:not([data-line-numbers])' ).length, 1 );
470 });
471
472 QUnit.test( 'Can set language', function( assert ) {
473 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-language .hljs.javascript:not([data-line-numbers])' ).length, 1 );
474 });
475
476 QUnit.test( '```[] enables line numbers', function( assert ) {
477 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-numbers .hljs[data-line-numbers=""]' ).length, 1 );
478 });
479
480 QUnit.test( '```[1,2,3] enables line highlights', function( assert ) {
481 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
482 });
483
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]484 QUnit.test( '```[234: ] line offset only', function( assert ) {
485 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-offset .hljs[data-ln-start-from="123"]' ).length, 1 );
486 });
487
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]488 QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
489 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
490 });
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]491
492 QUnit.test( '```javascript [123: 3,4,5] add line offset and enables line highlights and sets language', function( assert ) {
493 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-line-numbers="3,4,5"]' ).length, 1 );
494 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-ln-start-from="456"]' ).length, 1 );
495 });
496
497 QUnit.test( '```javascript [756:] add line offset and sets no line highlights and sets language', function( assert ) {
498 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-offset-and-lanugage .hljs.javascript[data-ln-start-from="756"]' ).length, 1 );
499 });
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]500
501 QUnit.test( '```block should allow custom fragment', function( assert ) {
502 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
503 });
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]504
505 } );
506
507 deck1.initialize();
508 deck2.initialize();
509 deck3.initialize();
510 deck4.initialize();
511 deck5.initialize();
512 deck6.initialize();
513 </script>
514
515 </body>
516</html>