Reveal.JS presentations

• Reveal.js can be used to give nice HTML presentations.

• Once set up, the code for your templates will look something like this:

  <section markdown=1>## Title of the slide
  
  * Bullet 1
  
  * Fancy equation: $\displaystyle f(x) = \frac{1}{(2\pi)^d}
    \int_{\R^d} \hat f(\xi) e^{i x \cdot \xi} \, d\xi$
  
  * Bullet 3
  
  </section>
  

• The equation will render like this: $\displaystyle f(x) = \frac{1}{(2\pi)^d} \int_{\R^d} \hat f(\xi) e^{i x \cdot \xi} \, d\xi$

• Setup instructions below.

Before you start

• Reveal.js has a no code solution that may work better for you.

• You can write slides in Markdown and render them with JavaScript without using this script.

  • Pro: No compile step (so you don’t need this script)

  • Con: Need to run a local server to get live previews (some setup required, but easy).

  • Con: The markdown converter doesn’t play nice with math.

    • Delays switching slides

    • Some complicated formulae got borked

• The last point was a deal breaker for me, which is why I wrote this script.

Using this script (md-to-html)

1. Install md-to-html, and the required dependencies.

2. Copy the examples/presentation folder to a new directory (say ~/talks/2023-confX) for your talk.

   • There are settings in config.yaml and helper styles in local.css

3. Edit index.md in any text editor and write your talk. To view your talk run:

   $ md-to-html.py index.md -p

4. Set up live previews to automatically refresh the browser every time you make a change.

Some snippets you may find helpful

• Write math as you would in LaTeX: $E = mc^2$ renders to $E = mc^2$.

• Add {.fragment} on a line by its own after items to create a fragment

• 

  Include figures (floated right) as follows:

  <figure class='float'>
    <img src="..." />
    <figcaption>caption</figcaption>
  </figure>
  

• For videos use

  <figure class='float'>
    <video controls>
      <source src="..." />
    </video>
  </figure>
  

• Various helper CSS classes are in local.css

Configuring Reveal

• For small changes, use YAML frontmatter or config.yaml

  ---
  reveal_configure: |
      Reveal.configure({
        transition: 'slide',
        progress: 'true',
      });
  ---
  

• For bigger changes extend the revealjs.j2 template.

  • Look at revealjs-highlight.j2 for an example.

Serving reveal locally

• Only needed if you’re not online while writing / giving your talk

• Set the lib metadata to library paths:

  lib:
    polyfill: /path/to/polyfill
    mathjax: /path/to/MathJax
    font_awesome: /path/to/fontawesome-free-6.5.2-web
    reveal_js_plugins: /path/to/reveal.js-plugins
    reveal_js: /path/to/reveal.js
  

• Download MathJax, FontAwesome, Reveal.js-plugins, reveal.js.

• Check compatibility of your browser:

  • Open polyfill.min.js?features=es6 in your browser and check it is empty.

  • Create an empty file in /path/to/polyfill/v3/polyfill.min.js

Highlighting Code

• Can use codehilite or highlight.js

  • codehilite highlights at compile time and has light/dark theme switching.

  • highlight.js highlights at render time, and I couldn’t find a light theme.

  • highlight.js has better integration with reveal (dynamic effects)

  • Reveal has a highlight.js plugin.

• I use codehilite by default, mainly because it highlights at compile time, and does the light/dark switch.

• To use highlight.js do the following in YAML frontmatter or config.yaml:

  ---
  template: revealjs-highlight.j2
  enable_codehilite: false
  ---