Revealjs Introduction

Do you know this?

source

How to diff?

Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Do you know this?

How about that?

source

Webtechnologies + Markup Language = ???

REVEALJS

  • Framework for HTML presentations
  • Support for Markdown, orgmode, rST, and more
  • Speaker notes, pdf export, API, and more

Syntax

source of this presentation and a slightly more extensive example

Tooling

Many tools

  • Emacs, VS Code, Vim
  • R Studio, Jupyter
  • reveal-md Pandoc
  • HTML
  • Many more

Pandoc

pandoc -t revealjs -s -o slides.html myslides.md \
    -V revealjs-url=http://lab.hakim.se/reveal-js

Reveal-md

npm i -g reveal-md
reveal-md presentation.md --static public
reveal-md presentation.md

VS Code Extension

Revealjs Workflow

  1. Markdown editing
  2. Create a standalone HTML file with Pandoc
  3. Push it to your [Webserver|Github Pages|S3|…]
  4. … Or automate it via pipeline

Speaker Notes

PDF Export

  • reveal-md presentation.md –print slides.pdf
  • With vscode-reveal
  • Adding ?print-pdf-now manually to URL
  • Pandoc

Benefits

  • VCS, portable, small size
  • Easy to write
  • Powerful features
  • Less is more

To be considered

  • No diagrams ootb
  • Image sizing/alignment tricky
  • Additional export
  • Basic HTML knowledge required
  • Browser compatibility
  • Syntax depends on “build” tool

Alternatives

Thanks!