Presentation slides with Reveal.js

Using the reveal javascript library its possible to build intricate presentation slides for the browser. While its possible to create a sample using a web client over at https://slides.com/ I personally prefer to download the latest version directly from the github account Latest release in order to generate your slide presentation by hand.

Steps to get it all up and running:

  1. Create a new folder and extract the latest reveal.js code into a sub-folder called "reveal.js"
  2. In the root of your project copy the following html code into a file named index.html
  3. Open the index.html file with your browser of choice (note: chrome seems to be the preferred option)

The above sample is just a quick setup to get you going but there are many features in this library that you can take advantage of:

  • Markdown support using "<section data-markdown> ..."
  • PDF support by going to "?print-pdf" in chrome. The sample above provides support for this using a small javascript tag which makes use of some inbuilt javascript libraries.
  • Hidden notes support using "<section data-separator-notes=...>"
  • Slide data transitions such as "fading" in and out, zooming as well as controlling the speed

There are many more features that you can play about with including embedded videos, images and other multimedia. One feature that particularly interests me is embedding external markdown files. In terms of project development teams would be able to provide customer demos along side your versioned code base. It’s also possible to override the existing css but you may find this to be difficult when using the markdown content due to the way that this is converted by reveal.js on the fly.

For a quick introduction on other features in the current version 3 release have a look at the following slideshare from the author of Reveal.js Hakim El Hattab: