Reveal.js has a whole bag of tricks to help you highlight the concepts in your presentations. I’ll show you how to write presentations with Emacs & Org-mode that make use of these features, whilest keeping your content as markdown text. I use a simple template with all the common features there as examples I can copy-n-paste.
I also have a Github pages site with example slides I have created.
In a previous article I showed you how to configure Emacs, Org-reveal and Reveal.js to create HTML5 presentations.
Using Emacs, create a file for your presentation and ensure that the filename has the .org extension.
C-x C f my-presentation.org
You can create a new file in Emacs just by opening a file with the new filename.
There is a special set of tags you can use to define the title slide, including the theme and style of the overall presentation.
At the top of the
my-presentation.org file, add
#+Title: Presenting with Emacs #+Author: John Stevenson #+Email: @jr0cket
At first I could not figure out how to add a twitter handle rather than an email address, then I realised I could put anytihng for the email address. So I just put @jr0cket as the email address and it displays just fine on the rendered slides.
Once you have defined the overall configuration of the presentation, you can add a table of contents or include special formatting libraries like mathjax.
I never use the table of contents as unless you have a short presentation it will run off the bottom of the screen. Here is an example of not having a table of contents, but having mathjax available:
#+OPTIONS: toc:nil reveal_mathjax:t
You can choose from several built in presentations, including default, beige, sky, night (my favorite), serif, simple, moon
You can also make your own theme by creating a new CSS file and defining styles to for that theme.
Define which theme you want using the code:
There are several built in styles of transition effects to move from one slide to another. I find linear the most pleasing, as it simply slides the content in from the right or bottom to. Cube is quite a nice rotating cube in the middle of the screen, so you may not get the full benefit of a wide screen display. Zoom is a bit to much for my delicate eyes.
The available tranistions include: default, cube, page, concave, zoom, linear, fade, none
Define a transition before any of the slide content (before the first heading) using the code:
Each slide is defined by using a
* character in front of the title. * is the top-level header for an Org-mode file, so you can collapse each slides content using the TAB key to make it easy to navigate whist creating that content.
Using a single
* for a number of slide titles will create a series of slides you navigate horizontally. If you define a slide with two
* characters, then you create slides underneath the slide above. These slides underneath are navigated vertically, giving a 2 dimensional effect to your presentation.
* title 1 * title 2 ** sub-title 2.1 ** sub-title 2.2 * title 3
Each title is a seperate slide, however sub-title 2.1 and 2.1 are slides underneath title 2. If you are on the title 2 slide and you press the left arrow, you will got to title 3 slide. If you are on title 2 slide and press the down arrow, you will go to slide heading 2.1.
So with this simple notation you can create a 2-dimentional presentation.
You can place what ever text you want underneath the heading to for the slide content
* A very interesting slide **This slide is interesting because I am a geek :) - bullet points can be added in moderation - dont get too carried away with them
Links to other web pages and resources can be added by simply including a web address in double square brackets:
[[web address]] [[http://www.google.com]]
You can also mark text to be a link by placing the link text inside double square brackets as follows:
[[web address][clickable text]] [[http://www.google.co.uk] [Google search engine]]
Any links defined will use the slide style for their colour, font and any animation styles.
You can include images in the presentation using the same kind of syntax for links. Simply add the relative path of your image within double brackets
This will display an image from the file org-reveal.png in the images folder. The same form is also used if you want to include images from web
You can set a different colour or image background for each slide, over-riding the presentation them chosen. This is set by defining properties for each slide using the
To define the colour of the slide background you can use an RGB coluor value or any supported CSS colour format. Here is a simple example of a slide with a red background
:PROPERTIES: :reveal_background: #FF0000 :END:
When setting a background image simply provide the relative path to that image. You can also make the background image slide in rather than fade in.
This slide has a background image
:PROPERTIES: :reveal_background: ./logos/github-octopus.png :reveal_background_trans: slide :END:
You can animate specific parts of each slide using Fragment Options. You can make your content grow, shrink, roll-in and fade-out. You can also highlight the text in red, green and blue.
- This slide rolls in text line by line:
#+ATTR_REVEAL: :frag roll-in
- Highlight the last bulletpoint in red
- all these bullet-points
Once you have your presentation written you can generate the presentation with the command
This command creates a single index.html file that contains your whole 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.
The next step is to get these presentations in the Cloud. I could use Heroku, although as this is just a static website and then Github pages makes more sense. I will cover deploying your presentations to Github pages in a follow-on article.
I may also create my own theme by customising one of the existing cascading style sheets (CSS files) should I have issues with projectors but at the moment the night theme works well for me.
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