blog/content/tips/presenting.md

---
Title: Tools for making and giving presentations
Date: 2024-11-03
Author: Fabrice
Category: Tips
Tags: presentation, vim, latex
Slug: presenting
Header_Cover: ../images/covers/pts24-talk.jpg
Summary: Some of the tools I use for making and giving presentations.
lang: en
---

# Introduction

Over the past year, I have to give quite a few presentations in different
contexts: internal to the company, for open-source conferences, for business
conferences…

I used these different opportunities to refine a bit my presentation tools, and
I just summarize them here for curious people. Please note that this blog post
will only cover the tooling needed to produce slides, not what to put inside.

This page may be updated, for instance if I start using yet another tool for
slide making that I think is worth mentioning. If you have subscribed to this
blog’s [RSS feed], you will be notified of future updates.

# Making Slides

For slide making, I prefer using tools that separate the content from the actual
design. I’m thus not using fancy WYSIWYG tools for that. If you are not
interested in that, you can already skip to the [presenting slides] section.

## LaTeX Beamer

As explained in the [typst article], I’m mostly using [LaTeX] to produce/typeset
documents, and presentations are not an exception. For this purpose I’m using
[beamer].

For this purpose, my [vim setup for LaTeX] proved to be pretty useful,
especially with the “compilation on save” feature. It allows me to have an
already set up text editor for LaTeX without having to fiddle and twiddle with
multiple setups. However, the backward search is not very accurate with beamer
slides.

### Overlays and Graphics

The main advantage, besides my familiarity with [LaTeX], lays in the [overlay]
system in beamer, that is quite powerful and provides a very precise way to
display elements. This overlay mechanism also compounds well with [TikZ] to
design animated graphics.

For instance in the example below, I can show the top part of the graph
initially, then the bottom, and change the name of the last node for the second
slide. That can be easily adjusted to have more steps in the process.

```latex
…
\usetikzlibrary{positioning}
…
\begin{tikzpicture}
  \tikzstyle{node} = [draw, rectangle, fill=blue!40, minimum height=2em]
  \tikzstyle{arrow} = [->, >=stealth, very thick]
  \node[node] (start) {Data};
  \node[node, right=1cm of start] (a1) {Enc($\cdot$)};
  \node<2->[node, below=5mm of a1] (a2) {Sig($\cdot$)};
  \node<1>[node, right=1cm of a1] (stop) {Encrypted Data};
  \node<2->[node, right=1cm of a1] (stop) {Encrypted and Signed Data};

  \draw[arrow] (start) -- (a1);
  \draw<2->[arrow] (start) -- (a2);
  \draw[arrow] (a1) -- (stop);
  \draw<2->[arrow] (a2) -- (stop);
\end{tikzpicture}
```

Resulting in:

![The last image from the above code](../examples/tikz-graph.svg "The last image from the above code"){width=66%}

Moreover, you have access to the whole latex ecosystem, especially those for
neat illustrations such as [tikzpingus].

**Note:** I feel compelled to say that the above technique is unsafe under fairly
reasonable assumptions. Long story short you should sign first *then* encrypt
and not do both in parallel. Please see [this paper](https://ia.cr/2001/045)
from the Crypto 2001 conference if you want a more detailed explanation.

### Customisation

It is also quite easy to customise slides with beamer. For instance, with
[metropolis], from its
[documentation](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf),
section 8 describes where to find specific colours. As for the fonts, if you are
using xelatex/lualatex, a simple `\setmainfont` suffices to redefine it.

For instance, if I want to have the alert text in orange:

```latex
\setbeamercolor[alerted text]{fg=orange}
```

### Drawbacks

However, LaTeX starts to slow down quickly, especially with a lot of [TikZ]
drawings… On documents, it’s not really an issue as it is possible to cache the
drawings with the `externalize` tikz library. However, when mixing overlays and
TikZ, it starts to [need some
tweaks](https://tex.stackexchange.com/questions/78955/use-tikz-external-feature-with-beamer-only).
I never included them in my workflow as they make TikZ drawings more complicated
than they are.

## Typst Touying

## Pandoc and reveal.js

[reveal.js] is a javascript framework to produce clean and dynamic slides. My
settings to generate them are liberally inspired by [Pablo
Coves](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/).

[Pandoc] on the other hand is a document converter tool that supports a very
extensive spectrum of formats and syntaxes. My most use case is to convert
markdown to some other reflowable format (usually HTML, and sometimes EPUB).

Using both in conjunction allows for quick and dynamic presentations which don’t
require _accuracy_ in placements. That may be the case for lightning talks for
instance. The main advantage compared to the two above solutions is that
[reveal.js] takes advantage of web browser capabilities to produce dynamic
transitions. Those are otherwise hard to get from PDFs (some people made custom
PDF reader for that).

I know that it’s also possible to use [pandoc] to produce directly [beamer] slides
for instance, thus benefiting from the simpler [Markdown] syntax while having
[LaTeX] as an engine. I however find this approach too rigid. It is indeed easy
to feed some LaTeX‑specific commands via the YAML header, e.g., for styling.
Unfortunately, when the need arises to do some specific positioning on a slide
for example, then we end up with some markdown-TeX mix that I found deeply
inelegant. That’s why I usually stick to LaTeX (or more recently [typst]) to
produce PDFs, as these tools are designed with an awareness of the page layout
(which blends well into the language). This property is not the case with
[Markdown], which is a markup language for text formatting (not typesetting).

### Ease of use

One nice thing about [pandoc] + [reveal.js] slide making is that, for simple
intends and purpose, there are very little structural codes (contrary to
[beamer] for instance where you have to define several variables before
starting).

From the following code, you can start making a presentation:

```yaml
---
title: Example Presentation
subtitle: It’s all about presenting
author: Fabrice Mouhartem
date: 2025-01-29
theme: solarized
---
```

Then run:

```sh
pandoc --standalone -t revealjs -o output.html input.md
```

And that’s all… well, it’s just a title slide and an empty slide, but it’s the
beginning of a **wonderful** presentation.

Then, similarly to [typst] + [touying], a level 1 heading creates a title slide,
and a level 2 heading spawns a new content slide. You can also spawn a new slide
with three hyphens (`---`).

### Speaker view

One of the advantage of [reveal.js] is the built-in [speaker view]. It spans a
pop-up with useful pieces of information for the speaker: a chronometer, a preview of the
upcoming slide and notes if there are any.

Its behaviour is similar to what you can have with `pdfpc` that I’ll show later
for PDF slides.

![](/examples/revealjs-speakerview.png "Speaker View")

### Customisation

- List of default [reveal.js styles]
- Simple customisation with CSS:
  <https://gist.github.com/jsoma/629b9564af5b1e7fa62d0a3a0a47c296#styling> see
  <https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss>
  as well for exposed variables.
- However, in standalone mode, changing the font does not work well…
- Create custom theme: <https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md>
  - <https://github.com/Chouhartem/reveal.js/tree/cryptpad-theme>

# Presenting Slides {#presenting-slides}

## wl-mirror

## pdfpc

[RSS feed]: /feeds/all.rss.xml
[typst]: https://typst.app/
[touying]: https://touying-typ.github.io/
[typst article]: {filename}../software/typst.md
[presenting slides]: #presenting-slides
[LaTeX]: https://www.latex-project.org/
[beamer]: https://ctan.org/pkg/beamer
[vim setup for LaTeX]: {filename}../software/nvim-latex.md
[overlay]: https://www.overleaf.com/learn/latex/Beamer_Presentations%3A_A_Tutorial_for_Beginners_(Part_4)%E2%80%94Overlay_Specifications
[TikZ]: https://www.ctan.org/pkg/pgf
[tikzpingus]: https://github.com/EagleoutIce/tikzpingus
[reveal.js]: https://revealjs.com/
[reveal.js styles]: https://revealjs.com/themes/
[pandoc]: https://pandoc.org/
[metropolis]: https://github.com/matze/mtheme
[markdown]: https://en.wikipedia.org/wiki/Markdown
[speaker view]: https://revealjs.com/speaker-view/