Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

test-markdown.html 18KB

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