Making Presentations with Emacs and reveal.js

Just as I do not say "Google" when speaking about searching for something on the internet, I don't make "PowerPoints", but presentations. In particular, I use Org-Reveal within Emacs to create reveal.js HTML files. What LaTeX is to Word, reveal.js is to PowerPoint. When opened in a web browser in fullscreen, they are functionally equivalent to presentation mode. To follow along with what follows, do this first:

1. Download the latest release of reveal.js and extract it somewhere. In my case, this is /home/username/reveal.js/reveal.js/.
2. M-x package-install followed by org-reveal (I'm assuming you have MELPA set up and have used Emacs a bit).
3. Add (setq org-reveal-root "file:///home/username/reveal.js/reveal.js/") to your init.el.
4. M-x load-library and then ox-reveal will load org-reveal.

> Title slides

The title slide can be created like so:

#+Title: title
#+Author: name
#+Email: email

> Presentation options

The file my-reveal.css allows you to use CSS to format slides.

#+REVEAL_INIT_OPTIONS: width:1200, height:800, margin: 0.1, minScale:0.2, maxScale:2.5, transition:'fade'
#+OPTIONS: toc:nil
#+REVEAL_THEME: dracula
#+REVEAL_HLEVEL: 1

#+REVEAL_EXTRA_CSS: my-reveal.css

#+OPTIONS: num:nil

#+REVEAL_MARGIN: 1
#+REVEAL_MATHJAX: t

> Slide with bullet points

The following creates bullet points which are successively revealed.

* Title
#+ATTR_REVEAL: :frag roll-in
-
  #+BEGIN_EXPORT html
  
Bullet point text
  #+END_EXPORT
#+ATTR_REVEAL: :frag roll-in
-
  #+BEGIN_EXPORT html
  
Bullet point text
  #+END_EXPORT
#+ATTR_REVEAL: :frag roll-in
-
  #+BEGIN_EXPORT html
  
Bullet point text
  #+END_EXPORT
#+ATTR_REVEAL: :frag roll-in
-
  #+BEGIN_EXPORT html
  
Bullet point text
  #+END_EXPORT

> Left: Column of bullet points, Right: Picture/caption

   #+REVEAL_HTML: <div class="gridded_frame_with_columns">
    #+REVEAL_HTML: <div class="one_of_2_columns column_with_rows">
     #+REVEAL_HTML: <div class="one_of_2_rows">
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="font-size: 0.45em; text-align: justify;">Text

       <p class="fragment roll-in" style="font-size: 0.45em; text-align: justify;">Text

       #+END_EXPORT
     #+REVEAL_HTML: </div>
     #+REVEAL_HTML: <div class="one_of_2_rows">
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="direction: ltr; font-size: 0.45em; text-align: justify;">Text

       <p class="fragment roll-in" style="direction: ltr; font-size: 0.45em; text-align: justify;">Text

       #+END_EXPORT      
     #+REVEAL_HTML: </div>
    #+REVEAL_HTML: </div>
    #+REVEAL_HTML: <div class="one_of_2_columns">
     file:tensor.png
     #+BEGIN_EXPORT html
     <p style="font-size: 0.3em; text-align: center;">Reference: <a href="link">link text </a></p>
     #+END_EXPORT
    #+REVEAL_HTML: </div>
   #+REVEAL_HTML: </div>

> Left: Column of two rows of bullet points, Right: Picture/caption

   #+REVEAL_HTML: <div class="gridded_frame_with_columns">
    #+REVEAL_HTML: <div class="one_of_2_columns column_with_rows">
     #+REVEAL_HTML: <div class="one_of_2_rows">
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="direction: ltr; font-size: 0.5em; text-align: justify;">Bullet point </p>
       #+END_EXPORT
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="direction: ltr; font-size: 0.5em; text-align: justify;">Bullet point </p>
       #+END_EXPORT
     #+REVEAL_HTML: </div>
     #+REVEAL_HTML: <div class="one_of_2_rows">
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="direction: ltr; font-size: 0.5em; text-align: justify;">Bullet point </p>
       #+END_EXPORT
       #+BEGIN_EXPORT html
       <p class="fragment roll-in" style="direction: ltr; font-size: 0.5em; text-align: justify;">Bullet point </p>
       #+END_EXPORT      
     #+REVEAL_HTML: </div>
    #+REVEAL_HTML: </div>
    #+REVEAL_HTML: <div class="one_of_2_columns">
     file:picture.png
     #+BEGIN_EXPORT html
     <p style ="font-size: 0.3em; text-align: center;">Caption 

     #+END_EXPORT
    #+REVEAL_HTML: </div>
   #+REVEAL_HTML: </div>

The classes "gridded_frame_with_columns" and similar are defined in my-reveal.css like this:

.gridded_frame_with_columns {
    display: flex;
    flex-flow: row;
}
.one_of_2_columns {
    width: 50%;
}
.column_with_rows {
    display: flex;
    flex-grow: auto;
    flex-flow: column;
}
.one_of_2_rows {
    height: 50%;
}

> Tables

This is how a slide with a table is created:

#+REVEAL_HTML:
| A | B | C | D | E
| text | text | 75.02 | 1.72 | 74.79
| text | text | 39.83 | 3.45 | 85.92

You can add a <div style="font-size: 100%;"> after #+REVEAL_HTML: to modify the font size of the table.

> Single-picture slides

Modify the :width percentage to shrink or enlarge the picture.

* Title
#+ATTR_REVEAL: :frag roll-in
#+ATTR_HTML: :width 85%
file:picture.png