Emacs is a tool that just keeps on giving and Org-mode is a fantantastic way to create text based content and manage it effectively. As Org-mode is just a text format then it can be easily converted by Emacs into other formats (markdown, pdf, html, etc). I’ll show you how to create other formats from Org-mode, so you can confidently write everything in Org-mode and generate any format you need.
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
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.
Sometimes its the little things that make a difference and after seeing how easily customise the Clojure REPL prompt with Leiningen I had a little hack with words, symbols and colours and came up with something nicer (in my opinion).
Org-mode is a great way to track tasks and manage all those to-do items in one place, although Org-mode has a very simple workflow by default (TODO | DONE). To track your tasks in more detail you can define extra stages or create a completely workflow.
Emacs Org-mode has a feature called Org-capture that makes it easy to keep track of all the to-do’s that crop up as we work on projects. With Org-capture you can make comments across all your files and projects and link to them all from one place.
Here is how to configure Emacs Org-capture so you can quickly create new tasks relevant to specific files and easily manage them all in one place. If you are not familiar with Emacs Org-mode, take a look at my article: Manage your developer life with Org-mode.
As a busy developer I end up working on several projects, documents & books at the same time. I want a simple way to capture notes where I don’t have to worry about formatting. I also want to keep a track on all the things I am working on. As I do most of my coding & writing with Emacs, then I was sure it had something that could help.
Emacs is a really powerful tool for Clojure development, although without a guiding hand it can be a bit of a learning curve. Using the Emacs Live its really simple to get a fully featured development environment for Clojure. I will show you how to get Emacs Live installed and how to start using it for Clojure.