Open Source Musings The thoughts, ideas, and opinions of an open source guy

Creating slides with Emacs org-mode and Reveal.js

A man speaking into a microphone

Over the last year or so, I’ve started to get back into giving presentations. Nothing too grand — just 15 to 30 minute talks to small audiences. While I still find doing presentations stressful, I enjoy using those talks to share ideas and information.

And, like most speakers, I use slides. Mine are quite minimal — either a couple of words or an image. While there are a number of solid open source applications for creating slides, over the last year or so I’ve been experimenting with Reveal.js. It’s a framework for creating very nice looking HTML slides. Using Reveal.js also gives me a chance to embrace my inner geek a bit and hand code some HTML.

Recently, I started used Emacs and org-mode again. And, as luck would have it, I stumbled across a package called org-reveal that lets me use org-mode to prepare Reveal.js slides.

Let’s take a look at how to use org-reveal and Reveal.js to create simple presentation slides.

Before we begin

Obviously, you’ll need to know how to use Emacs and have a basic knowledge of org-mode to follow the instructions in this blog post. If you don’t don’t know how to use Emacs, and are interested in learning, a good book is Mastering Emacs by Mickey Petersen. No, that’s not an affliate link — I don’t earn any money from recommending Petersen’s book. You can learn more about using org-mode in its documentation.

What I’m sharing in this post is what I do. It’s what works for me. I expect to draw some criticism from some org-mode purists or power users out there. So be it. This is the way I do things, and if that doesn’t mesh with the way they do things, then the problem doesn’t lie with me.

With that out of the way, let’s get going.

Getting started

I’ll assume that you have Emacs and or-mode installed on your computer. You can grab both from your distro’s package manager or software centre. If your distro’s package manager doesn’t have the most recent version of org-mode, you can download it from its website. That site also has instructions explaining how install org-mode.

You’ll also need to install the org-reveal package, and grab a copy of the Reveal.js archive. You can unpack the Reveal.js anywhere you like. I prefer to have it close at hand, so I put it in the folder ~/slides/reveal.js.

Next, add the following to your .emacs file:

;; Reveal.js + org-mode
(require 'ox-reveal)
(setq org-reveal-root "file:///path-to-reveal.js")
(setq org-reveal-title-slide nil)

The path-to-reveal.js is where you unpacked the Reveal.js archive a moment or so ago. In my setup, that entry is file:///home/scott/slides/reveal.js.

That was a bit of work. Now, you’re ready to go.

Creating your slide deck and slides

Fire up Emacs and create a new file. Name the file whatever you want, but make sure it has the extension .org. The extension, as you might have guessed, tells Emacs it’s an org-mode file. Whenever you open a file with that extension, Emacs automatically makes the Org menu available on the Emacs menu bar.

Add the following information to the top of the file:

#+OPTIONS: num:nil toc:nil
#+REVEAL_TRANS: None/Fade/Slide/Convex/Concave/Zoom
#+REVEAL_THEME: Black/White/League/Sky/Beige/Simple/Serif/Blood/Night/Moon/Solarized
#+Title: Title of Your Talk
#+Author: Your Name
#+Email: Your Email Address or Twitter Handle

That block is like metadata for your slide deck. Let’s look at the first three items in that block:

  • num:nil and toc:nil suppress the numbering of headings and the creation of a table of contents when you generate your slides
  • #REVEAL_TRANS controls the transition effect when you move between slides. I usually go with None, but feel free to experiment
  • #REVEAL_THEME controls the look of the slides. I usually stick with Black or White, but, again, feel free to experiment

Add a heading after the metadata block by typing an asterisk followed by some text. This will be the title slide. Make it a good one. If you want to add your name below the title, press Enter. Emacs adds a blank, indented space below the heading. Type your name, and any other information, in that space.

Add new slides to the deck by adding headings to the file. Simple, no?

What I just outlined above works well if you want to create slides with only text on them. What about slides with images?

Adding images

I use images on my slides more than I use text. Not to dazzle or distract my audience, but to offer some visual context and as a visual prompt for myself. It doesn’t work for every slide, or every talk, but using the right image can be effective. And it can be fun.

To add images to you slides, first create a sub folder for you images in the folder where you saved your slide file. I usually call that folder images which, while unimaginative, does the job. Once you have that folder, drop the images you want to use in your slides into that folder.

Next, create an empty heading in your slides file. Press enter to add a blank space below that heading and then add this block of text to the space:

:PROPERTIES:
:reveal_background: images/name-of-image
:reveal_background_size: width-of-image
:reveal_background_trans: slide
:END:

Replace name-of-image with the image’s filename (including the extension). Replace width-of-image with the width of the image in pixels — for example, 640px. Make sure, though, that your images aren’t too wide or they’ll go beyond the edges of your screen. I try to keep the images in my slides under 1000 pixels wide.

Adding speaker notes

Reveal.js has a nifty feature that lets you display speaker notes on the computer that’s serving your slides. Only you see those notes, and they only appear when you press the s key on your keyboard. Of course, you need to add the actual notes to your slides to use them.

To add notes to your slide, press Enter to create a blank space under a heading and then add this block of text to that space:

#+BEGIN_NOTES
Your note
#+END_NOTES

Where you’d replace Your note with text that reminds or prompts you about the key points of that slide.

Generating your slides

You’ve crafted each slide. Now what? You’ll want to generate the HTML version of your slide deck. To do that, press CTRL-c CTRL-e on your keyboard. This opens the org-mode export buffer. Next, type R-R. Emacs creates a single HTML file in the folder where you saved your slide file.

Open that HTML file in a web browser. You can move through the slides by pressing the arrow keys on your keyboard.

Final thought

There is a lot more that you can do with both Reveal.js and org-reveal. I haven’t explored that in too much depth if only because I like to keep my slides simple.

Using Emacs and org-mode, in conjunction with Reveal.js, to create presenation slides can seem like overkill. And, to be honest, I don’t use that combo for all of my slides. But when I need to quickly pull together a slide deck it does the job well.

Thoughts? Let's start a conversation on Twitter.

Did you enjoy this post or find it useful? Then please consider supporting this blog with a micropayment via Liberapay. Thanks!