Contents

Making Slideshows From Emacs Org Mode with org-reveal

Introduction

In this article, I will talk about How to using Emacs with org-reveal to make a slideshows. This article will based on Jake ’s video in YouTube.

Doom Emacs Set-up

Setting up org-reveal within Doom Emacs is straightforward.

  1. Add these lines to your packages.el:

    1
    2
    3
    
       ;; ~/.doom.d/packages.el
       (package! org-reveal)
       (package! ox-reveal)
    
  2. Add some optional configuration to your config.el.

    1
    2
    3
    4
    
       ;; ~/.doom.d/config.el
       (after! org
         (load-library "ox-reveal")
         (setq org-reveal-root "file:///path/to/reveal.js-master"))
    

    NOTE: If you omit this, you must add the Basic Header below at the top of each org-mode file, so org-reveal can find the javascript.

Basic Header

1
2
3
4
5
6
7
8
9

:REVEAL_PROPERTIES:
#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js
#+REVEAL_REVEAL_JS_VERSION: 4
:END:

#+TITLE: Reveal JS Presentation
#+SUBTITLE: Straightforward Emacs - org-reveal
#+AUTHOR: Boyang Yan

Now, let’s we try to exporting.

Exporting

In Doom with Vim keybindings, exporting is SPC m e R B to export as html and then open the page in your default web browser. After the first export, you can do SPC m e R R to rewrite the existing html and refresh the page manually.

If you like the default settings, that’s all you need! But if you want customizations, read on.

Basic Usage:

  1. Overview Mode: you can type o, enter to overview mode.
  2. Next Sides: type space.

More Customize

  1. Themes

    1
    
       #+REVEAL_THEME: serif
    
  2. Options

    1
    
       #+OPTIONS: timestamp:nil toc:1 num:nil
    
  3. Doing not every element into a sigle slide

    1
    2
    3
    4
    
       ;* Intro Slideshows
       #+ATTR_REVEAL: :frag (appear)
       1) Point one
       2) Point two
    
  4. Add Image

    1
    2
    3
    4
    
       ;* Image
       #+ATTR_HTML: :width 45% :align center
    
       https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/EmacsIcon.svg/1200px-EmacsIcon.svg.png
    
  5. Speacker Note

    1
    2
    3
    
       #+BEGIN_NOTEs
       Here is NOTE.
       ,#END_NOTEs
    

Type s to open Speacker View.

Full Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#+TITLE: Org-Reveal Video
#+AUTHOR: Jake B - https://www.youtube.com/channel/UCBMMB7Yi0eyFuY95Qn2o0Yg/
#+DATE: [2021-09-02 Thu]
:PROPERTIES:
#+OPTIONS:
:END:

;* Installing org-reveal
#+BEGIN_SRC emacs-lisp
  (use-package ox-reveal)

;* First export ;** Basic Header

1
2
3
4
5
6
7
8
9

:REVEAL_PROPERTIES:
#+REVEAL_ROOT: https://cdn.jsdelivr.net/npm/reveal.js
#+REVEAL_REVEAL_JS_VERSION: 4
:END:

#+TITLE: Reveal JS Presentation
#+SUBTITLE: Straightforward Emacs - org-reveal
#+AUTHOR: Jake B

;* Improving your export

  1. #+REVEAL_THEME:
  2. #+OPTIONS: timestamp:nil toc:1 num:nil
  3. #+REVEAL_INIT_OPTIONS: slideNumber:true

;* #+ATTR_HTMLs ;** Step-by-step elements https://revealjs.com/fragments/ #+ATTR_REVEAL: :frag (appear) ;** Images

1
2
  #+ATTR_HTML: :width 45% :align center
  https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/EmacsIcon.svg/1024px-EmacsIcon.svg.png

;* Notes You can write speaker notes within org-reveal using the #+BEGIN_NOTES and #+END_NOTES lines. These notes can be seen in a speaker window. You open this window by pressing the s key on your reveal.js presentation, like so.

;* Links

#+end_src

Reference List

  1. https://www.youtube.com/watch?v=avtiR0AUVlo
  2. https://github.com/yjwen/org-reveal
  3. https://revealjs.com/
  4. https://alexshroyer.com/posts/2021-08-13-Org-Reveal.html