Building Beautiful Presentations with reveal.js

As a Developer & Architect, I’ve never been a huge fan of Powerpoint or Keynote. My use cases, like showing & executing code, visualize with e.g. d3.js usually are not so fun with the both of the tools. When I did trainings showing code, where the code was updated regularly, I invested more time into formatting & highlighting code, than into writing the code.

Since our internal conference approaches, I have the pleasure to prepare new presentations. Last time I used beautiful.ai, which was great, because I was able to focus on content, with no code to show. This time i wanted to takle pain points like have the option to build my slides as code or in Markdown, and I wanted to show code, beautifully highlighted, without much of carefully copy & paste.

reveal.js to the rescue

After a short search I found reveal.js. A MIT-Licened HTML, CSS & Javascript presentation framework, which had almost anything I looked for right away. A great documentation on github.com & a huge set of plugins.

A theme for us

I was quickly able to create a theme which is virtual7 flavored. To share it, I’ve put it onto our internal GitLab instance.

Beautiful code highlighting

reveal.js uses highlight.js for code highlighting under the hood. highlight.js supports more than 180 languages like Java, CSS, HTML, R, Python and Bash & almost 90 themes which usually include all themes you know from your IDEs. Feel free to check out highlight.js demo page and play around with it. By the way, there is another great syntax highlighter for the browser created by Lea Verou, prism.js.

Executing code right in a slide

In the past, when creating a demo for a presentation I had to switch windows or to show a video. Sometimes it is just executing 1 line of code, which shows a small result. This is sometimes very distracting and a little bit error prone. With reveal.js run-in-terminal I’ll execute code directly in the browser. This works by running a predefined script with my code, started by a separate Node.js process.

In this example the command vault -h is being executed right on click, the output is being displayed in the slide. For security reasons those requests are only handled on localhost. This seems to be useful for small examples.

Markdown Support

Slides can be generated with normal HTML, Markdown Code in HTML or by including a Markdown file.

Generating PDFs

reveal.js has a very simple way of preparing the slides for printing as PDF: Cascading Style Sheets, short CSS. A special css file is imported for this case and standard browser function for printing can be used to save the slides as PDF. Alternatively automate it with decktape.

Diagramms

You can just use anything, which runs in the browser, wether it is a SVG, d3.js or something else.

By the way: Basics like presenter mode, notes and an overview mode are implemented.

There are a bunch of other integrations, like xaringan for r and other which directly integrate into existing environments.