summaryrefslogtreecommitdiff
path: root/public/plugin/markdown/example.html
diff options
context:
space:
mode:
authorxnum2015-11-23 20:38:26 +0800
committerxnum2015-11-23 20:38:26 +0800
commitf51b7370f030c5cd1235fa7a23514a7e1ccef2dd (patch)
treeb6f43191518b16f74ca33b1406567a0ffcaa6f32 /public/plugin/markdown/example.html
parent75ae505a1544d8999e6705aad7ed96ff5a6eb0e5 (diff)
Add Slide Mode
using reveal.js and some part of reveal-md
Diffstat (limited to '')
-rw-r--r--public/plugin/markdown/example.html129
1 files changed, 129 insertions, 0 deletions
diff --git a/public/plugin/markdown/example.html b/public/plugin/markdown/example.html
new file mode 100644
index 00000000..36f6a510
--- /dev/null
+++ b/public/plugin/markdown/example.html
@@ -0,0 +1,129 @@
+<!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>
+
+ </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>