<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- General and theme style sheets -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.6.2/css/reveal.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.6.2/css/theme/night.css" id="theme">

<!-- For syntax highlighting -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.6.2/lib/css/zenburn.css">

<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = '//cdn.jsdelivr.net/reveal.js/2.6.2/css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>

<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/reveal.js/2.6.2/lib/js/html5shiv.js"></script>
<![endif]-->

<style>
.bk-hbox {
  margin-top: -1em !important;
}

</style>

</head>

<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Bokeh Showcase</h1>
</section>
<section>
    <div id={{ id1 }}>
        {{ tag1 | safe }}
    </div>
</section>
<section>
    <div id={{ id2 }}>
        {{ tag2 | safe }}
    </div>
</section>
<section>
    <div id={{ id3 }}>
        {{ tag3 | safe }}
    </div>
</section>
</div>
</div>

<script src="//cdn.jsdelivr.net/reveal.js/2.6.2/lib/js/head.min.js"></script>

<script src="//cdn.jsdelivr.net/reveal.js/2.6.2/js/reveal.js"></script>

<script>

// Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,

theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'zoom', // default/cube/page/concave/zoom/linear/none

// Optional libraries used to extend on reveal.js
dependencies: [
{ src: "//cdn.jsdelivr.net/reveal.js/2.6.2/lib/js/classList.js", condition: function() { return !document.body.classList; } },
{ src: "//cdn.jsdelivr.net/reveal.js/2.6.2/plugin/highlight/highlight.js", async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: "//cdn.jsdelivr.net/reveal.js/2.6.2/plugin/notes/notes.js", async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>

</body>
</html>