Make elegant presentations with org and reveal

earvingad

Reveal.js

Reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

You can either write the presentation with HTML, Markdown or using a plan in Slides, but there is an easier way.

Org-Reveal

Org-Reveal exports your Org documents to reveal.js presentations. With Org-reveal, you can create beautiful presentations with 3D effects from simple but powerful Org contents.

Install (in Doom)

Option 1 (org-re-reveal)

In Doom emacs just add the +present flag in the :lang section of the init.el file. NOTE: It will install a fork called org-re-reveal 

(org +roam2 +present)               ; organize your plain life in plain text

Then run doom sync and it will install all the required packages, including reveal.js

Option 2 (org-reveal)

Installation is pretty straight-forward. For Doom emacs add these lines to your packages.el: 

(package! org-reveal)
(package! ox-reveal)

Then add the following to your config.el. 

(after! org
  (load-library "ox-reveal"))

Then run doom sync and it will install all the required packages, including reveal.js

Extra configuration

In short, you are now set to go.

Write an org document as usual and then export with: SPC m e v b (for the +present flag) or SPC m e R B (for the org-reveal package).

Some other configuration can be included in the header as:

  • This wil remove the creation time stamp and limit the table of contents to major.
#+OPTIONS: timestamp:nil toc:1 num:nil

  • Setting the reveal root is not required if you chose Option 1, since doom already downloaded the package locally, but it is useful when publishing online.
#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js

  • Set your theme preference and include some extra css for personal tunning/config preferences.
#+REVEAL_THEME: league
#+REVEAL_EXTRA_CSS: ./nord.css

  • Enable code highlighting and select your preferred theme. It includes by default Zenburn and Monokai, but you can set yours locally or if available online.
#+REVEAL_PLUGINS: (highlight)
#+REVEAL_HIGHLIGHT_CSS: https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/nord.css

Cool features

By placing the #+ATTR_REVEAL: above the source code/paragraphs/list you can configure how it will be displayed.

For example, you can add code highlight with: 

#+ATTR_REVEAL: :code_attribs data-line-numbers='1|2|3'

farewell = {' Thanks ', ' for ', ' reading. '}
for word in farewell:
    print(f'{word:-^50}')

Auto animation

You can add animation to the code block. For this you need to place :PROPERTIES: block below the header as: 

** Auto animation
:PROPERTIES:
:REVEAL_EXTRA_ATTR: data-auto-animate
:END:

And then the #+ATTR_REVEAL: above the source code: 

#+ATTR_REVEAL: :code_attribs :data_id example

See the next example.

Auto animation

You can add animation to the code block. 

farewell = {' Thanks ', ' for ', ' reading. '}

Auto animation

You can add animation to the code block. 

farewell = {' Thanks ', ' for ', ' reading. '}

def goodbye(sentence):

Auto animation

You can add animation to the code block. 

farewell = {' Thanks ', ' for ', ' reading. '}

def goodbye(sentence):
    for word in sentence:
        print(f'{word:-^50}')

Auto animation

You can add animation to the code block. 

farewell = {' Thanks ', ' for ', ' reading. '}

def goodbye(sentence):
    for word in sentence:
        print(f'{word:-^50}')

goodbye(farewell)

Auto animation with lists

And there are many styles for fragments that you can use for animation. 

#+ATTR_REVEAL: :frag (grow shrink roll-in fade-out none highlight-blue) :frag_idx (4 3 2 1 5 6)
  1. I will grow.
  2. I will shrink.
  3. I rolled in.
  4. I will fade out.
  5. I don’t fragment.
  6. I turn blue

Paragraphs can also be…

Fragmented.

LaTeX equations

Also you can render LaTeX code directly, although it requires internet connection to mathjax or have it installed locally.

This: 

${n! \over k!(n-k)!} = {n \choose k}$

will be displayed as:

\({n! \over k!(n-k)!} = {n \choose k}\)

Final thoughts

  • There are many many more things you can do. A lot of third party plugins, see how to use them here.
  • It might still be easier to use the already know presenting alternatives like powerpoint, but for simple things and teaching I find org-reveal very didactic.
  • This is also cross platform, the produced html file can work on any webbrowser.
  • There are another alternatives, but I am too tired to write about them right now. I’ll leave it to you.