docs/com/plugin/markdown/example.html

   1 <!doctype html>
   2 <html lang="en">
   3
   4         <head>
   5                 <meta charset="utf-8">
   6
   7                 <title>reveal.js - Markdown Demo</title>
   8
   9                 <link rel="stylesheet" href="../../css/reveal.css">
  10                 <link rel="stylesheet" href="../../css/theme/white.css" id="theme">
  11
  12         <link rel="stylesheet" href="../../lib/css/zenburn.css">
  13         </head>
  14
  15         <body>
  16
  17                 <div class="reveal">
  18
  19                         <div class="slides">
  20
  21                 <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
  22                 <section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
  23
  24                 <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
  25                 <section data-markdown data-separator="---">
  26                     <script type="text/template">
  27                         ## Demo 1
  28                         Slide 1
  29                         ---
  30                         ## Demo 1
  31                         Slide 2
  32                         ---
  33                         ## Demo 1
  34                         Slide 3
  35                     </script>
  36                 </section>
  37
  38                 <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
  39                 <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
  40                     <script type="text/template">
  41                         ## Demo 2
  42                         Slide 1.1
  43
  44                         --
  45
  46                         ## Demo 2
  47                         Slide 1.2
  48
  49                         ---
  50
  51                         ## Demo 2
  52                         Slide 2
  53                     </script>
  54                 </section>
  55
  56                 <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
  57                 <section data-markdown>
  58                     <script type="text/template">
  59                         A
  60
  61                         ---
  62
  63                         B
  64
  65                         ---
  66
  67                         C
  68                     </script>
  69                 </section>
  70
  71                 <!-- Slide attributes -->
  72                 <section data-markdown>
  73                     <script type="text/template">
  74                         <!-- .slide: data-background="#000000" -->
  75                         ## Slide attributes
  76                     </script>
  77                 </section>
  78
  79                 <!-- Element attributes -->
  80                 <section data-markdown>
  81                     <script type="text/template">
  82                         ## Element attributes
  83                         - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
  84                         - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
  85                     </script>
  86                 </section>
  87
  88                 <!-- Code -->
  89                 <section data-markdown>
  90                     <script type="text/template">
  91                         ```php
  92                         public function foo()
  93                         {
  94                             $foo = array(
  95                                 'bar' => 'bar'
  96                             )
  97                         }
  98                         ```
  99                     </script>
 100                 </section>
 101
 102             </div>
 103                 </div>
 104
 105                 <script src="../../lib/js/head.min.js"></script>
 106                 <script src="../../js/reveal.js"></script>
 107
 108                 <script>
 109
 110                         Reveal.initialize({
 111                                 controls: true,
 112                                 progress: true,
 113                                 history: true,
 114                                 center: true,
 115
 116                                 // Optional libraries used to extend on reveal.js
 117                                 dependencies: [
 118                                         { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
 119                                         { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 120                     { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 121                     { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
 122                                         { src: '../notes/notes.js' }
 123                                 ]
 124                         });
 125
 126                 </script>
 127
 128         </body>
 129 </html>