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.