forked from rajgoel/reveal.js-demos
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmarkdown-presenter.html
More file actions
143 lines (118 loc) · 5.86 KB
/
markdown-presenter.html
File metadata and controls
143 lines (118 loc) · 5.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Presentation</title>
<meta name="description" content="Custom presentation from markdown file">
<meta name="author" content="Asvin Goel">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="../reveal.js/css/reveal.css">
<link rel="stylesheet" href="klu.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
<!-- Font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../reveal.js-plugins/menu/font-awesome-4.3.0/css/font-awesome.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal.js/css/print/pdf.css' : 'reveal.js/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<script>
window.onload = function() {
var input = document.getElementById("myfile");
input.value = "";
input.addEventListener("change", loadContent);
function loadContent(event) {
var file = this.files[0]
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("ForkMe").outerHTML = "";
var slide = document.querySelector("section");
slide.setAttribute('data-markdown','');
slide.setAttribute('data-separator',"^\\n===\\n$");
slide.setAttribute('data-separator-vertical',"^\\n---\\n$");
slide.setAttribute('data-separator-notes',"^Note:");
slide.innerHTML = "<textarea data-template>" + reader.result + "</textarea>";
RevealMarkdown.initialize();
// refresh reveal
Reveal.toggleOverview();
Reveal.toggleOverview();
}
reader.onerror = function(err) {
console.log(err, err.loaded, err.loaded === 0, file);
}
reader.readAsText(event.target.files[0]);
}
}
</script>
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Please select markdown file</h1>
<input type="file" id="myfile" accept="text/*" style="font-size:24pt" />
</section>
<section>
<h2> The end </h2>
</section>
</div>
<div style="position: fixed; right: 130px; bottom: 30px; z-index: 30; font-size: 24px; " class="presentation-only"><a href="#" onclick="Reveal.prev(); return false;"><i class="fa fa-caret-left"></i></a></div>
<div style="position: fixed; right: 100px; bottom: 30px; z-index: 30; font-size: 24px; " class="presentation-only"><a href="#" onclick="Reveal.next(); return false;"><i class="fa fa-caret-right"></i></a></div>
</div>
<script src="../reveal.js/lib/js/head.min.js"></script>
<script src="../reveal.js/js/reveal.js"></script>
<script>
var url = window.location.href;
var MathJaxURL= (window.location.search.match( /offline/gi ) ? "mathjax/MathJax.js" : "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js");
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
width: 1280,
height: 800,
controls: false,
progress: true,
history: false,
center: true,
mouseWheel: true,
previewLinks: false,
slideNumber: true,
transition: 'none', // none/fade/slide/convex/concave/zoom
math: {
config: 'TeX-AMS_HTML-full', // See http://docs.mathjax.org/en/latest/config-files.html
mathjax: MathJaxURL // MathJax might require installation of fonts: sudo apt-get install fonts-stix
},
// Optional reveal.js plugins
dependencies: [
{ src: '../reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../reveal.js/plugin/markdown/marked.js'},
{ src: '../reveal.js/plugin/markdown/markdown.js'},
{ src: '../reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../reveal.js/plugin/math/math.js', async: true },
// { src: '../reveal.js/plugin/zoom-js/zoom.js', async: true },
// { src: '../reveal.js/plugin/notes/notes.js', async: true }
// { src: '../reveal.js-plugins/menu/menu.js' },
{ src: '../reveal.js-plugins/chalkboard/chalkboard.js' },
],
keyboard: {
67: function() { RevealChalkboard.toggleNotesCanvas() }, // toggle chalkboard when 'c' is pressed
66: function() { RevealChalkboard.toggleChalkboard() }, // toggle chalkboard when 'b' is pressed
171: function() { RevealChalkboard.clear() }, // clear chalkboard when '+' is pressed
8: function() { RevealChalkboard.reset() }, // reset all chalkboard data when 'BACKSPACE' is pressed
46: function() { RevealChalkboard.resetAll() }, // reset all chalkboard data when 'BACKSPACE' is pressed
},
});
</script>
<a id="ForkMe" href="https://github.com/rajgoel/reveal.js-demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
</body>
</html>