cziermann
/
graphql-pizza-demo
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
10 Commits
2 Branches
Branch: master
graphql-pizza-demo/presentation/test/test-markdown.html

468 lines
17KB
Raw Permalink Blame History 

  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>