Creating presentations with Emacs is quick and more collaborative than with other tools I have used. Using Emacs Org-mode you can easily structure and navigate your content. Using Org-Reveal you can generate a great looking HTML5 presentation using Reveal.js from your org-mode content.
I’ll show you how to configure Emacs, Org-Reveal and Reveal.js so you can create content in plain text and generate a themed, animated slide-deck that supports syntax highlighting for lots of languages. As your content is in plan text its easy to collaborate around it with Github.
I use Emacs Live as a base configuration, although there is no dependency on anything in Emacs Live to make this setup work.
Using Emacs we don’t need to write directly in HTML as we will generate it from our text file using Org-mode. There is a dependency on Reveal.js library with this approach.
1) Download the latest version of reveal.js
To see an example presentation, open the index.html from the extracted Reveal.js download in a browser.
Org-mode is a great way to write notes, make presentations and organise tasks. It is built into Emacs so you don’t need to do any configuration to use it. Simply create a file with a .org extension (eg.
my-presentation.org) and when you open that file in Emacs it will automatically switch on org-mode.
Org-mode allow you to structure information simply and quickly. The headings and sub-headings can expand and collapse using the tab key, so you only see the level of detail you need.
The content is always a text file so you don’t have to worry about any proprietary formatting and as its text its easy to collaborate around using developer tools like Git and Github.
Org-reveal is a feature you add to Emacs to generate presentations using Reveal.js. I am using Emacs Live as a base configuration, so I simply added the org-reveal file to my own customisations of Emacs Live in my live-pack.
I download the Org-Reveal file from Github and placed it in my live pack config folder
Then I edited my live-pack
init.el file to load org-reveal at Emacs start-up
Add a line to call the org-reveal script download from Github, with a path relative to the config folder of the live-pack
If you are publishing your presentation on the web then you should include a copy of the css, js and plugin folders from the Reveal.js project.
My current approach is to fork the Reveal.js project on Github (so I can keep track of updates) and create my presentations inside the reveal.js folder created when I cloned the my fork from github.
;; Fork reveal.js project on Github ;; Copy the URL from my forked repo git clone firstname.lastname@example.org:jr0cket/reveal.js.git cd reveal.js emacs my-presentation.org
I then set the org reveal root to be relative to my presentation. In this case my generated HTML presentation will look for css, js and plugin folders in the same parent folder as my presentation (reveal.js). In my live-pack init.el file I add the following to set the reveal root to be relative.
(setq org-reveal-root "")
Alternatively, you can set the location of Reveal.js to a specific file location. The location should be the full path to top level of the Reveal.js folder, this is also defined in my live-pack init.el file
(setq org-reveal-root "file:///var/www/revealjs/current")
Create a file for your presentation with a .org extension.
You can create a new file in Emacs just by opening a file with a new filename.
C-x C f my-presentation.org
In your new file you define slide titles using the
* notation. One
* for the slide heading (level 1 heading) and two
*‘s for slide bullet points (level 2 heading).
You can put anything you want under the slide heading and you dont have to use bullet points :).
Once you have your presentation written you can generate the presentation with the command
This command creates a single
.html file that contains the generated presentation, except for any images you have used. The
.html file will be have the same name as your org-mode file, so if you created your content in
my-presentation.org then you will generate
If your links and images are all correctly referenced in your presentation, then simply opening
my-presentation.html file in a browser will show you the end result.
You have seen how to set up Emacs, Org-reveal and Reveal.js so you can create great presentation without having to code in HTML. The next article in the series will cover how to write presentations with Emacs and Org-mode to make use of all the graphics options in Reveal.js, whilst keeping your content as simple text.
This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket