Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / e1893aed9df79d26db48538ace56cc0d55ae2f0c / . / inst / reveal.js-4.1.2 / test / test-markdown.html
blob: d79246c92fe6f4b3b62e604be310562cda66fdd1 [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>
284 </div>
285 </div>
286
287 <script type="module">
288 import Reveal from '../dist/reveal.esm.js'
289 import Markdown from '../plugin/markdown/markdown.esm.js'
290 import Highlight from '../plugin/highlight/highlight.esm.js'
291
292 let deck1 = new Reveal( document.querySelector( '.deck1' ), { plugins: [ Markdown ] })
293 deck1.addEventListener( 'ready', function() {
294
295 QUnit.module( 'Inline' );
296
297 QUnit.test( 'Vertical separator', function( assert ) {
298 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
299 });
300
301 QUnit.test( 'Horizontal separator', function( assert ) {
302 assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
303 });
304
305 } );
306
307 let deck2 = new Reveal( document.querySelector( '.deck2' ), { plugins: [ Markdown ] })
308 deck2.addEventListener( 'ready', function() {
309
310 QUnit.module( 'External' );
311
312 QUnit.test( 'Vertical separator', function( assert ) {
313 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
314 });
315
316 QUnit.test( 'Horizontal separator', function( assert ) {
317 assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
318 });
319
320 } );
321
322 let deck3 = new Reveal( document.querySelector( '.deck3' ), { plugins: [ Markdown ] })
323 deck3.addEventListener( 'ready', function() {
324
325 QUnit.module( 'Slide Attributes' );
326
327 QUnit.test( 'Id on slide', function( assert ) {
328 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
329 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
330 });
331
332 QUnit.test( 'data-background attributes', function( assert ) {
333 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
334 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
335 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
336 });
337
338 QUnit.test( 'data-transition attributes', function( assert ) {
339 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
340 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
341 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
342 });
343
344 QUnit.test( 'data-background attributes with default separator', function( assert ) {
345 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
346 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
347 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
348 });
349
350 QUnit.test( 'data-transition attributes with default separator', function( assert ) {
351 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
352 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
353 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
354 });
355
356 QUnit.test( 'data-transition attributes with inline content', function( assert ) {
357 assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
358 });
359
360 } );
361
362 let deck4 = new Reveal( document.querySelector( '.deck4' ), {
363 markdown: {
364 smartypants: true
365 },
366 plugins: [ Markdown ]
367 })
368 deck4.addEventListener( 'ready', function() {
369
370 QUnit.module( 'Options' );
371
372 QUnit.test( 'Options are set', function( assert ) {
373 assert.strictEqual( deck4.getPlugin( 'markdown' ).marked.defaults.smartypants, true );
374 });
375
376 QUnit.test( 'Smart quotes are activated', function( assert ) {
377 var text = deck4.getRevealElement().querySelector( '.reveal .slides>section>p' ).textContent;
378
379 assert.strictEqual( /['"]/.test( text ), false );
380 assert.strictEqual( /[“”‘’]/.test( text ), true );
381 });
382
383 } );
384
385 let deck5 = new Reveal( document.querySelector( '.deck5' ), { plugins: [ Markdown ] })
386 deck5.addEventListener( 'ready', function() {
387
388 QUnit.module( 'Element Attributes' );
389
390 QUnit.test( 'Vertical separator', function( assert ) {
391 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
392 });
393
394 QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
395 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' );
396 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
397 });
398
399 QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
400 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' );
401 });
402
403 QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
404 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' );
405 });
406
407 QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
408 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' );
409 });
410
411 QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
412 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' );
413 });
414
415 QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
416 assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
417 });
418
419 QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
420 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' );
421 });
422
423 QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
424 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' );
425 });
426
427 } );
428
429 let deck6 = new Reveal( document.querySelector( '.deck6' ), {
430 plugins: [ Markdown, Highlight ]
431 })
432 deck6.addEventListener( 'ready', function() {
433
434 QUnit.module( 'Code Blocks' );
435
436 QUnit.test( 'Defaults to no line numbers', function( assert ) {
437 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.defaults .hljs:not([data-line-numbers])' ).length, 1 );
438 });
439
440 QUnit.test( 'Can set language', function( assert ) {
441 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-language .hljs.javascript:not([data-line-numbers])' ).length, 1 );
442 });
443
444 QUnit.test( '```[] enables line numbers', function( assert ) {
445 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-numbers .hljs[data-line-numbers=""]' ).length, 1 );
446 });
447
448 QUnit.test( '```[1,2,3] enables line highlights', function( assert ) {
449 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
450 });
451
452 QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
453 assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
454 });
455
456 } );
457
458 deck1.initialize();
459 deck2.initialize();
460 deck3.initialize();
461 deck4.initialize();
462 deck5.initialize();
463 deck6.initialize();
464 </script>
465
466 </body>
467</html>