Creating Slick HTML Presentations Using reveal.js
Doing presentations wasn’t something new. But this time it had to be special, we had competition. Presentations are a way to create an overall impression. And, to create an impression we needed something different and impressive. Unlike the traditional ways of doing presentations, (PowerPoint, etc.), we decided to do it different this time. That was when we bumped into reveal.js.
reveal.js is a framework for creating beautiful presentations using HTML. It has a number of slick features like Markdown content, nested slides, PDF export, and JavaScript APIs for controlling the slide navigation. Presentations using reveal.js are written using HTML. There is also an interface for those who aren’t very tech savvy.
Setting Up reveal.js
Before using reveal.js, you should have both Node.js and Grunt installed on your machine. The next steps are to clone the reveal.js repository from GitHub, install all of the dependencies, and start the reveal server. The following list of commands are used to accomplish these steps.
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serveNext, navigate your browser to http://localhost:8000/ to view the presentation.
Creating a Presentation
The following code listing is a bare bones reveal.js HTML page containing no presentation slides. Before the end of the body tag, we have a script which is the key to all presentation configurations. There are a number of options that we can configure. For example, we can optionally show presentation progress, enable transitions, and set a theme for our presentation. We’ll dig deeper into that once we start adding slides to our presentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<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">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="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 = 'css/print/pdf.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Slides content to be added here -->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.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,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [{
src: 'lib/js/classList.js',
condition: function () {
return !document.body.classList;
}
}, {
src: 'plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/markdown/markdown.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}, {
src: 'plugin/zoom-js/zoom.js',
async: true,
condition: function () {
return !!document.body.classList;
}
}, {
src: 'plugin/notes/notes.js',
async: true,
condition: function () {
return !!document.body.classList;
}
}]
});
</script>
</body>
</html>Slides
Now, we’ll start adding slides into our empty presentation. Let’s add our first slide, using the following HTML. section elements represent slides. We can even nest slides within other slides, as illustrated by the nested sections in the example.
<div class="reveal">
<div class="slides">
<section>
Welcome to Reveal.js Demo
</section>
<section>
Theme Changes to Solarized. Isn't it Nice ;)
</section>
<section>
<section>
LalaLand Floor 1
</section>
<section>
LalaLand Floor 2
</section>
</section>
</div>
</div>Save your file and restart the server using the command grunt serve. You should see our newly created slides. Note that the slides can be controlled using the arrow keys. Although this functionality is enabled by default, you can configure the behavior using keyboard: true in the Reveal.initialize() method (see the original HTML file).
Themes
There are a number of themes available like beige, solarized, and sky which are located in css/theme. In order to use them, you simply need to change the default style on your page, as shown in the following example.
<link rel="stylesheet" href="css/theme/default.css" id="theme">Transitions
Transition style and speed can be configured in Reveal.initialize() using the transition and transitionSpeed parameters. An example of this is shown below.
transitionSpeed: 'default', // default / fast / slow
backgroundTransition: 'default', // default / none / slide / concave / convex / zoomMarkdown Slide Content
If you are a Markdown fan, then writing your slides using Markdown should excite you. Simply add a data-markdown attribute to your section tag, and wrap you content inside a tag as shown below.
<section data-markdown>
<script type="text/template">
## Here comes Markdown
</script>
</section>Displaying Source Code
reveal.js uses highlight.js for syntax highlighting. In order to display source code inside slides, add your code inside of <pre><code> tags as shown below.
<section>
jQuery Code Sample
<pre><code>
$(function () {
$('a').click(function(event) {
alert('Thanks for visiting!'');
});
});
</code></pre>
</section>Creating Speaker Notes
reveal.js has a plugin to display notes per slide. Speaker notes can be added to a slide using the aside tag as shown below. In order to view the notes, simply press the s key.
<section>
Hello I have Notes. Press 's' to view
<aside class="notes">
I'm your Notes :)
</aside>
</section>Displaying Math
Math equations can also be displayed in reveal.js slides. We simply need to add a dependency on the MathJax library. The following example shows how this is done in Reveal.initalize().
Reveal.initialize({
// other options ...
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
dependencies: [{
src: 'plugin/math/math.js',
async: true
}]
});As you can see, MathJax is loaded from a remote server. Make sure you have internet connectivity, or host the library on your local machine. Once the library has been included, we can create a math formula, as shown below. Notice that the $ character is used to begin and end the math formula.
<section>
<p>Math Formula</p>
$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$
</section>Deploying to Heroku
Next, we’re going to learn how to host our presentation on Heroku. Create a file named web.js in the project’s root directory, and add the following code. Note that using the express.static middleware in the project’s root directory will allow visitors to view all of your project files, including package.json. If security is important, you should host your presentation from a project subdirectory.
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
app.use(express.logger());
app.use('/', express.static(__dirname));
app.listen(port, function() {
console.log('Server started on ' + port);
});Also create a file named Procfile (with no file extension), containing the following line.
web: node web.jsNext, open up package.json and ensure that a dependency exists for express. Make sure the version is 3.x.x. Finally, deploy to Heroku using the following commands.
git init
git add .
git commit -m "first"
heroku create
git push heroku masterConclusion
reveal.js is one of the most popular choices for creating presentations using HTML. We looked at some of its basic features in this article, but there are many more available. I suggest taking a look at the official documentation to see what else is possible. The code from this article is available on GitHub, and a live demo is up and running on Heroku.