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