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 serve

Next, 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 / zoom

Markdown 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.js

Next, 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 master

Conclusion

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.

Frequently Asked Questions (FAQs) about Creating Slick HTML Presentations Using Reveal.js

What is Reveal.js and how does it work?

Reveal.js is a powerful, open-source framework that allows you to create beautiful, interactive presentations using HTML. It works by allowing you to structure your slide content using HTML tags, and then applies its own CSS and JavaScript to transform that structure into a fully-featured presentation. This includes features like nested slides, markdown support, PDF export, speaker notes, and a JavaScript API for controlling the presentation.

How can I start using Reveal.js for my presentations?

To start using Reveal.js, you need to download the framework from the official GitHub repository. Once downloaded, you can start creating your presentation by editing the index.html file. You can add slides to your presentation by adding new section elements inside the div with class “slides”.

Can I use Reveal.js without any coding knowledge?

While Reveal.js is a tool that uses HTML, CSS, and JavaScript, you don’t necessarily need to be an expert in these languages to use it. Basic knowledge of HTML would be enough to create a simple presentation. However, to take full advantage of all the features Reveal.js offers, some understanding of CSS and JavaScript would be beneficial.

How can I add nested slides to my Reveal.js presentation?

Nested slides, or vertical slides, can be added to your Reveal.js presentation by adding a new section element inside an existing section. This creates a vertical stack of slides that can be navigated up and down, as opposed to the default horizontal navigation.

Is it possible to export my Reveal.js presentation to PDF?

Yes, Reveal.js supports exporting your presentation to PDF. This can be done by opening your presentation in Chrome and appending “?print-pdf” to the URL, then printing the page to PDF using Chrome’s print dialog.

How can I use markdown in my Reveal.js presentation?

Reveal.js supports markdown, allowing you to write your slides using this popular markup language. To use markdown in your presentation, you need to add a data-markdown attribute to your section element and write your content inside a script tag with type “text/template”.

Can I control my Reveal.js presentation programmatically?

Yes, Reveal.js provides a JavaScript API that allows you to control your presentation programmatically. This includes methods for navigating to specific slides, playing and pausing embedded media, and getting the current state of the presentation.

How can I add speaker notes to my Reveal.js presentation?

Speaker notes can be added to your Reveal.js presentation by adding an aside element with class “notes” inside your section element. These notes will be visible only to you during the presentation.

Can I customize the look and feel of my Reveal.js presentation?

Yes, Reveal.js allows you to customize the look and feel of your presentation by editing the CSS files included in the framework. You can change colors, fonts, transitions, and more to match your personal style or brand.

Is Reveal.js compatible with all browsers?

Reveal.js is compatible with all modern browsers. However, some features may not work as expected in older browsers or certain mobile browsers. It’s always a good idea to test your presentation in the browser you’ll be using to present.