diff options
Diffstat (limited to 'plugin/markdown/example.html')
| -rw-r--r-- | plugin/markdown/example.html | 281 |
1 files changed, 149 insertions, 132 deletions
diff --git a/plugin/markdown/example.html b/plugin/markdown/example.html index 300e39e..d855860 100644 --- a/plugin/markdown/example.html +++ b/plugin/markdown/example.html @@ -1,136 +1,153 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8"> - - <title>reveal.js - Markdown Demo</title> - - <link rel="stylesheet" href="../../css/reveal.css"> - <link rel="stylesheet" href="../../css/theme/white.css" id="theme"> - - <link rel="stylesheet" href="../../lib/css/zenburn.css"> - </head> - - <body> - - <div class="reveal"> - - <div class="slides"> - - <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines --> - <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section> - - <!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> - <section data-markdown data-separator="---"> - <script type="text/template"> - ## Demo 1 - Slide 1 - --- - ## Demo 1 - Slide 2 - --- - ## Demo 1 - Slide 3 - </script> - </section> - - <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes --> - <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"> - <script type="text/template"> - ## Demo 2 - Slide 1.1 - - -- - - ## Demo 2 - Slide 1.2 - - --- - - ## Demo 2 - Slide 2 - </script> - </section> - - <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) --> - <section data-markdown> - <script type="text/template"> - A - - --- - - B - - --- - - C - </script> - </section> - - <!-- Slide attributes --> - <section data-markdown> - <script type="text/template"> - <!-- .slide: data-background="#000000" --> - ## Slide attributes - </script> - </section> - - <!-- Element attributes --> - <section data-markdown> - <script type="text/template"> - ## Element attributes - - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> - - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> - </script> - </section> - - <!-- Code --> - <section data-markdown> - <script type="text/template"> - ```php - public function foo() - { - $foo = array( - 'bar' => 'bar' - ) - } - ``` - </script> - </section> - - <!-- Images --> - <section data-markdown> - <script type="text/template"> -  - </script> - </section> - - </div> - </div> - - <script src="../../lib/js/head.min.js"></script> - <script src="../../js/reveal.js"></script> - - <script> - - Reveal.initialize({ - controls: true, - progress: true, - history: true, - center: true, - - // Optional libraries used to extend on reveal.js - dependencies: [ - { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } }, - { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, - { src: '../notes/notes.js' } - ] - }); - - </script> - - </body> +<head> + <meta charset="utf-8"> + + <title>reveal.js - Markdown Demo</title> + + <link href="../../css/reveal.css" rel="stylesheet"> + <link href="../../css/theme/white.css" id="theme" rel="stylesheet"> + + <link href="../../lib/css/zenburn.css" rel="stylesheet"> +</head> + +<body> + +<div class="reveal"> + + <div class="slides"> + + <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines --> + <section data-markdown="example.md" data-separator="^\n\n\n" + data-separator-vertical="^\n\n"></section> + + <!-- Slides are separated by three dashes (quick 'n dirty regular expression) --> + <section data-markdown data-separator="---"> + <script type="text/template"> + ## Demo 1 + Slide 1 + --- + ## Demo 1 + Slide 2 + --- + ## Demo 1 + Slide 3 + </script> + </section> + + <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes --> + <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$"> + <script type="text/template"> + ## Demo 2 + Slide 1.1 + + -- + + ## Demo 2 + Slide 1.2 + + --- + + ## Demo 2 + Slide 2 + </script> + </section> + + <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) --> + <section data-markdown> + <script type="text/template"> + A + + --- + + B + + --- + + C + </script> + </section> + + <!-- Slide attributes --> + <section data-markdown> + <script type="text/template"> + <!-- .slide: data-background="#000000" --> + ## Slide attributes + </script> + </section> + + <!-- Element attributes --> + <section data-markdown> + <script type="text/template"> + ## Element attributes + - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> + - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> + </script> + </section> + + <!-- Code --> + <section data-markdown> + <script type="text/template"> + ```php + public function foo() + { + $foo = array( + 'bar' => 'bar' + ) + } + ``` + </script> + </section> + + <!-- Images --> + <section data-markdown> + <script type="text/template"> +  + </script> + </section> + + </div> +</div> + +<script src="../../lib/js/head.min.js"></script> +<script src="../../js/reveal.js"></script> + +<script> + + Reveal.initialize({ + controls: true, + progress: true, + history: true, + center: true, + + // Optional libraries used to extend on reveal.js + dependencies: [ + { + src: '../../lib/js/classList.js', condition: function () { + return !document.body.classList; + } + }, + { + src: 'marked.js', condition: function () { + return !!document.querySelector('[data-markdown]'); + } + }, + { + src: 'markdown.js', condition: function () { + return !!document.querySelector('[data-markdown]'); + } + }, + { + src: '../highlight/highlight.js', async: true, callback: function () { + hljs.initHighlightingOnLoad(); + } + }, + {src: '../notes/notes.js'} + ] + }); + +</script> + +</body> </html> |