reveal-md
Version:
reveal.js on steroids! Get beautiful reveal.js presentations from your Markdown files.
124 lines (111 loc) • 3.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>{{{title}}}</title>
{{#absoluteUrl}}
<meta property="og:title" content="{{{title}}}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{{absoluteUrl}}}/featured-slide.jpg" />
<meta property="og:url" content="{{{absoluteUrl}}}" />
{{/absoluteUrl}}
<link rel="shortcut icon" href="{{{base}}}/favicon.ico" />
<link rel="stylesheet" href="{{{base}}}/dist/reset.css" />
<link rel="stylesheet" href="{{{base}}}/dist/reveal.css" />
<link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
<link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />
{{#cssPaths}}
<link rel="stylesheet" href="{{{.}}}" />
{{/cssPaths}} {{#watch}}
<script>
document.write(
'<script src="http://' +
(location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' +
'script>'
);
</script>
{{/watch}}
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown {{{slidifyAttributes}}}>
<textarea data-template>
{{{markdown}}}
</textarea>
</section>
</div>
</div>
<script src="{{{base}}}/dist/reveal.js"></script>
{{#mermaidOptionsStr}}
<script src="{{{base}}}/mermaid/dist/mermaid.min.js"></script>
{{/mermaidOptionsStr}}
<script src="{{{base}}}/plugin/markdown/markdown.js"></script>
<script src="{{{base}}}/plugin/highlight/highlight.js"></script>
<script src="{{{base}}}/plugin/zoom/zoom.js"></script>
<script src="{{{base}}}/plugin/notes/notes.js"></script>
<script src="{{{base}}}/plugin/math/math.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
// default options to init reveal.js
var defaultOptions = {
controls: true,
progress: true,
history: true,
center: true,
transition: 'default', // none/fade/slide/convex/concave/zoom
slideNumber: true,
highlight: {
highlightOnLoad: false
},
plugins: [
RevealMarkdown,
RevealHighlight,
RevealZoom,
RevealNotes,
RevealMath
]
};
// options from URL query string
var queryOptions = Reveal().getQueryHash() || {};
var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
</script>
{{#scriptPaths}}
<script src="{{{.}}}"></script>
{{/scriptPaths}}
<script>
Reveal.initialize(options);
Reveal.addEventListener('ready', function (event) {
const blocks = Reveal.getRevealElement().querySelectorAll('pre code:not(.mermaid)');
const hlp = Reveal.getPlugin('highlight');
blocks.forEach(hlp.highlightBlock);
});
</script>
{{#mermaidOptionsStr}}
<script>
const mermaidOptions = extend({ startOnLoad: false }, {{{mermaidOptionsStr}}});
mermaid.startOnLoad = false;
mermaid.initialize(mermaidOptions);
const cb = function (event) {
mermaid.init(mermaidOptions, '.stack.present > .present pre code.mermaid');
mermaid.init(mermaidOptions, '.slides > .present:not(.stack) pre code.mermaid');
}
Reveal.addEventListener('ready', cb);
Reveal.addEventListener('slidetransitionend', cb);
</script>
{{/mermaidOptionsStr}}
</body>
</html>