How to create slides with Emacs Org mode and Reveal.js

Over the final yr or so, I’ve began to get closely again into utilizing Emacs and the Org mode bundle (for taking notes, organizing your self, and extra). I’ve additionally began dipping my toes again into the water of giving brief shows. I have been questioning find out how to mix Emacs with giving talks.

You’re most likely asking What does presenting need to do with a textual content editor? Quite a bit, truly!

Like many audio system, I take advantage of slides when presenting. Mine are fairly minimal—both a few phrases or a picture per slide. I take advantage of Reveal.js to create these slides, which additionally offers me an opportunity to embrace my inside geek a bit and hand-code some HTML.

So, the place does the fusion of Emacs and Reveal.js occur? That comes within the type of an Emacs bundle referred to as Org-Reveal. Let’s check out find out how to use Emacs, Org-Reveal, and Reveal.js to create easy presentation slides.

Getting began

I will assume you could have Emacs and Org mode put in in your laptop. If not, grab Emacs to your working system and download the latest model of Org mode. The Org mode web site additionally explains find out how to set up it.

You’ll additionally want to put in Org-Reveal, and seize a replica of the Reveal.js archive. You can unpack Reveal.js wherever you want. I put it within the folder ~/slides/reveal.js, the place I retailer my slides.

Once you have performed all that, add the next to your .emacs file to combine Org-Reveal into Emacs:

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

In the above, path-to-reveal.js is the place you unpacked the Reveal.js archive. In my setup, that entry is file:///house/scott/slides/reveal.js.

That was a bit of labor. Luckily, you solely have to do it as soon as. Now, you are able to go.

Creating your slide deck and slides

Fire up Emacs and create a brand new file. Name the file no matter you need, however be sure that it has the extension .org. The extension tells Emacs it is an Org mode file. Whenever you open a file with that extension, Emacs applies the right syntax highlighting and makes the Org menu out there on the menu bar.

Add the next info to the highest 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 to your slide deck. Let’s take a look at the primary three gadgets in that block:

• num:nil and toc:nil suppress the numbering of headings and the creation of a desk of contents if you generate your slides
• #REVEAL_TRANS controls the transition effect if you transfer between slides. I often go together with None, however be happy to experiment
• #REVEAL_THEME controls the look of the slides. I often keep on with Black or White, however, once more, be happy to experiment

Add a heading after the metadata block by typing an asterisk, adopted by an area, adopted by some textual content. This would be the title slide. (Make the title a great one!)

If you wish to add your title under the title, press Enter. Emacs provides a clean, indented house under the heading. Type your title, and every other info, in that house.

Add new slides to the deck by including headings (textual content with an asterisk and house in entrance of it, bear in mind?) to the file. Simple, is not it?

Here’s what a easy presentation seems to be like in Emacs:

And this is what it seems to be like in an internet browser:

This works nicely if you wish to create slides with simply textual content on them. What about slides with pictures?

Adding pictures

I take advantage of pictures with my slides as a lot as I take advantage of textual content. Those pictures aren’t there to dazzle or distract my viewers. They provide some visible context and act as a visible immediate for me. It would not work for each slide or each speak, however utilizing the correct picture might be efficient. And it may be enjoyable.

To add pictures to your slides, first create a subfolder to your pictures within the folder the place you saved your slide file. I often name that folder pictures, which, whereas unimaginative, does what it says on the tin. Drop the pictures you wish to use in your slides into that folder.

Next, create an empty heading in your slides file—one with an asterisk and no textual content. Press Enter so as to add a clean house under that heading, after which add this block of textual content to the house:

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

Replace name-of-image with the picture’s filename (together with its extension). Replace width-of-image with the width of the picture in pixels—for instance, 640px. Make positive that your pictures aren’t too extensive, or they’re going to transcend the sides of your display screen. I attempt to preserve the pictures in my slides underneath 1,000 pixels extensive.

Adding speaker notes

Reveal.js has a nifty characteristic that allows you to show speaker notes on the pc that is serving your slides. Only you see these notes, and so they solely seem if you press the s key in your keyboard.

To add notes to your slides, press Enter to create a clean house underneath a heading, then add this block of textual content to that house:

#+BEGIN_NOTES
Your notice
#+END_NOTES

Replace Your notice with textual content that reminds or prompts you about the important thing factors of that slide.

Generating your slides

You’ve crafted every slide in your presentation. Now what? You’ll wish to generate the HTML model of your slide deck. To try this, press Ctrl+c Ctrl+e in your keyboard. This opens the Org mode export buffer. Next, kind R+R. Emacs creates a single HTML file within the folder the place you saved your slide file.

Open that HTML file in an internet browser. You can transfer by means of the slides by urgent the arrow keys in your keyboard.

Final thought

There is much more that you are able to do with each Reveal.js and Org-Reveal. I have never explored that in an excessive amount of depth as a result of I wish to preserve my slides easy.

Using Emacs and Org mode with Reveal.js to create presentation slides can seem to be overkill. And, to be sincere, I do not use that combo for all my slide shows. But once I have to rapidly pull collectively a slide deck, they do an amazing job.

And, as a result of I care, I’ve created a simple Org-Reveal slides template that you may obtain and use or modify to your coronary heart’s content material. You’re welcome.