presentations

Presentations
Log | Files | Refs

example.html (4312B)

      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/monokai.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                 <!-- Images -->
    103                 <section data-markdown>
    104                     <script type="text/template">
    105                         ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
    106                     </script>
    107                 </section>
    108 
    109             </div>
    110 		</div>
    111 
    112 		<script src="../../js/reveal.js"></script>
    113 
    114 		<script>
    115 
    116 			Reveal.initialize({
    117 				controls: true,
    118 				progress: true,
    119 				history: true,
    120 				center: true,
    121 
    122 				// Optional libraries used to extend on reveal.js
    123 				dependencies: [
    124 					{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    125                     { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    126                     { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
    127 					{ src: '../notes/notes.js' }
    128 				]
    129 			});
    130 
    131 		</script>
    132 
    133 	</body>
    134 </html>