How to use pandoc and Markdown to build a simple reveal.js presentation (and a bit about how to customize it, too)

README.md

Requirements

First you need to install pandoc.

I used brew install pandoc to install via Homebrew since I'm on a mac.

Writing your presentation

Make a slides.md for your slides (or name it whatever you want!). I put images in an /images/ folder. You can see how links and images and all of that work from this sample:

---
author: Jonathan Soma
title: Two Deep Learning Papers
subtitle: Robustness and Security in ML Systems, Spring 2021
date: January 19, 2021
---

## Handwritten Digit Recognition with a Back-Propagation Network, 1990

Y. Le Cun, B. Boser, J. S. Denker, D. Henderson, R. E. Howard, W. Hubbard, and L. D. Jackel

a.k.a. LeCun90c

---

## Yann LeCun

![Yann LeCun on Wikipedia](images/lecun.png)

Chief AI Scientist (and several other titles) at Facebook, "founding father of convolutional nets."

---

## Yann Le Cun vs. Yann LeCun

> All kinds of badly programmed computers thought that "Le" was my middle name. Even the science citation index knew me as "Y. L. Cun", which is one of the reasons I now spell my name "LeCun".
>
> From Yann's [Fun Stuff](http://yann.lecun.com/ex/fun/) page
>
> Also: [Falsehoods Programmers Believe About Names](https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/)

---

### The Problem

How to turn handwritten ZIP codes from envelopes into numbers

![Examples of original zipcodes from the testing set](images/original.png)

---

Styling

When building, you can pick a theme from this list.

I also added some custom CSS in a slides.css file to make a few tweaks. It's still ugly, but y'know, could be worse.

<style>
.slides {
    font-size: 0.75em;
}
.reveal ul {
    display: block;
}
.reveal ol {
    display: block;
}

img {
    max-height: 350px !important;
}

figcaption {
    font-size: 0.6em !important;
    font-style: italic !important;
}

.subtitle {
    font-style: italic !important;
}

.date {
    font-size: 0.75em !important;
}
</style>

And yes, you need the <style> opening/closing tags in there even though it's named as a css file. Just seemed more appropriate than using the extension .html-but-only-has-a-css-tag-in-it.

Building

Finally you get to say, "hey pandoc, make a reveal.js presentation called index.html from slides.md, pulling reveal's source from the web. Include the slides.css file in it, and use the serif theme."

pandoc -t revealjs -s -o index.html slides.md -V revealjs-url=https://unpkg.com/reveal.js/ --include-in-header=slides.css -V theme=serif

To get it on the internet I used a Makefile to sync with my server using rsync, but something like GitHub Pages should work just fine! You can even use GitHub Pages without git if you're exceptionally lazy.

Thank you!
This saved me, I was not making any progress trying to customize my presentation.