Skip to content

Instantly share code, notes, and snippets.

@jromero

jromero/slideshow.html

Created October 17, 2018 18:33
Show Gist options
  • Save jromero/b48a5da62de1dfc63ac706c22f53289c to your computer and use it in GitHub Desktop.
Save jromero/b48a5da62de1dfc63ac706c22f53289c to your computer and use it in GitHub Desktop.
Download ZIP
Single page reveal.js sample
Raw
slideshow.html
<!doctype html>
<html>
<head>
<!-- CDN: https://www.jsdelivr.com/package/npm/reveal.js -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/reveal.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/theme/moon.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/css/zenburn.min.css">
<style type="text/css">
.no-style {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: none !important;
}
.center-content {
vertical-align: middle !important;
text-align: center !important;
}
.wh-50 {
width: 50%;
height: 50%;
}
.wh-75 {
width: 75%;
height: 75%;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown>
### Reveal JS
</section>
<section>
<div data-markdown>
### Code Block
```javascript
let code = "highlighted";
```
</div>
</section>
<section>
<section>
<div data-markdown>
### Vertical 1
</div>
</section>
<section>
<div data-markdown>
### Vertical 2
</div>
</section>
</section>
<section>
<div data-markdown>
### Video
</div>
<video data-autoplay height="200">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4">
</video>
</section>
<section>
<div data-markdown>
### Full HTML
</div>
<table>
<tr style="border: none">
<td class="center-content">
<img
class="no-style"
width="100"
src="https://www.gcppodcast.com//images/icons/compute/Cloud-Functions.png"/>
<br/>
<small>Google Cloud<br/>Functions</small>
</td>
<td class="center-content">
<img
class="no-style"
width="100"
src="https://cloud.google.com/_static/images/cloud/products/logos/svg/machine-learning.svg"/>
<br/>
<small>Google Cloud<br/>Machine Learning</small>
</td>
<td class="center-content">
<img
class="no-style"
width="100"
style="vertical-align: middle"
src="https://pa1.narvii.com/6890/f2ea71e224da55e84ebd9152dbff348779156a97r1-384-384_128.gif"/>
<br/>
<small>Google Assistant</small>
</td>
<td class="center-content">
<img
class="no-style"
width="100"
style="vertical-align: middle"
src="https://res-3.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/zy6ttel4bwjtojwcf3cu"/>
<br/>
<small>Twilio</small>
</td>
</tr>
</table>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/reveal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/js/head.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/js/html5shiv.min.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
// showNotes: true,
dependencies: [
{src: 'https://cdn.jsdelivr.net/npm/[email protected]/plugin/markdown/marked.min.js'},
{src: 'https://cdn.jsdelivr.net/npm/[email protected]/plugin/markdown/markdown.min.js'},
{src: 'https://cdn.jsdelivr.net/npm/[email protected]/plugin/notes/notes.min.js', async: true},
{
src: 'https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/highlight.min.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment