If you’re a web developer and have been asked to give a presentation and need accompanying slides, then check out reveal.js.
If you go this route, you will probably start by cloning the reveal.js repository, finding the index.html file, and then you’ll begin replacing the default content with your own.
If you’d like to have some help with fitting your content into reveal.js, then you should take a look at reveal-ck. reveal-ck is short for “reveal.js construction kit.”
A Quick Example
Open up a terminal, and make sure you have Ruby 1.9.3+ with
Then, install reveal-ck with
gem install reveal-ck --no-rdoc --no-ri.
Verify that reveal-ck is present with
As a first step toward creating a set of slides, put the following
into a file named
1 2 3 4 5 6 7 8 9 10 11
%section above represents a new slide. There are four slides:
3, 2, 1, and Contact!
Once you’ve got that saved in a file name
reveal-ck generate, and you’re done!
Your slides will be available at
slides/index.html. If you are using
MacOS, you can preview them with
I’ve generated these slides and put the result online.
The example above is as simple as it gets. Here are a few more thoughts on getting the most out of reveal-ck and reveal.js.
The content that goes in
slides.haml is haml.
The reason reveal-ck does not author slides only in Markdown is because most of the really neat and more advanced stuff that you can do with reveal.js requires the ability to get at the underlying HTML classes and attributes.
You can also use slim with reveal-ck. The general idea is the same,
but create a file named
If you don’t need the more advanced features of reveal.js, or if you just like markdown, reveal-ck bundles redcarpet for markdown processing. This means that you can embed markdown in both slim and haml. For example, in haml:
1 2 3 4
You can also author slides in Ruby. The benefit of doing this is that you can build out a presentation programmatically. Here are some instructions if you’d like to learn more.
Alternate Slides File
By default, reveal-ck expects to find your slides in a file named
slides.rb. However, you can pick a
different name that ends with
rb and invoke
reveal-ck like so:
reveal-ck generate --file water-slides.haml
reveal.js effects and styling
To get the most of out reveal.js you need to understand the classes,
markup, and data attributes that it expects. For example, if you want
something to be initially hidden and then fade in when you advance
slides, you need to add the
fragment class. Here’s an example where
fragment is hidden initially and then appears in
stages as you advance:
1 2 3 4 5 6 7
And here is an example where vertical slides are used:
1 2 3 4 5
The way to make progress here is to look at reveal.js proper and read through its documentation (and examine the markup for the default slides). reveal-ck has an embedded version of reveal.js. If things aren’t working as expected, drop me a line— reveal.js will get out of date over time. It only takes a moment to update, but the gem has to be republished: just let me know.
Supplying a Config
reveal-ck pays attention to a central configuration file. You can
create a file named
config.yml in the same directory with your
slides files and put the following into it:
1 2 3 4
This will change the
<title> of the slides as you might expect, and
theme can be set to any of the available themes in reveal.js. Same
transition. By adding this file and regenerating, you can
with this result.
Bundling Up Images
As with any HTML document, if you’ve got an
<img/> you can make the
src absolute. However, if you don’t have (or don’t want) images
hosted anywhere, you can also bundle them up with reveal-ck.
If you’ve got a
slides.haml, create an
images/ directory as its
peer and put your images in there. When
reveal-ck generate runs,
images/ will be bundled up into the
In short, this means that you can reference those images with the following:
Displaying and Hosting
If you are connecting your computer up to a projector and displaying slides to an audience, you can simple open them in a browser.
If you want to make them accessible online, you get the benefits of presenter mode (hit “s” while presenting) as well as being able to view them from anywhere.
Because reveal.js slides are static content, you can generate the
slides/ directory and place the contents anywhere using whatever
tools you prefer.
If you’re already using Github, you should consider using Github Pages. In short:
- Start tracking your project with git. You’ll have a single
- When you generate your slides, add and commit everything in
- Create a new repository on Github. Push your
masterup to Github’s
- Finally, also push your
masterup to Github’s
Because of how Github Pages works, if your username is
your repository is
my-talk, then the contents of your
branch will be available at http://jedcn.github.io/my-talk/. Slides
are generated in the
slides/ directory, so you will find your
content here: http://jedcn.github.io/my-talk/slides.
Here’s a quick overview to reveal-ck.
And here’s a Getting Started page.
If these aren’t enough, let me know what’s missing.
reveal.js is awesome.
Before I knew about it, I’d be coding along in Emacs (or whatever) and if I knew slides were in my future I’d boot up Keynote (or whatever).
Now, with reveal.js, you can author slides without ever leaving your favorite editor. They are plain text, so they can be easily managed in source control. On top of that, they look great, are mobile aware, and if you host them on the web, you can easily bring them anywhere.
Taking it one step further, I like using reveal-ck when dealing with reveal.js because:
reveal-ck allows me to isolate my content (the slides) from the 70+ files that come with reveal.js
reveal-ck allows me to focus right on my content (the
In short, reveal-ck takes less work to make a better presentation.
At any rate, I hope this helps. Let me know what you think.