Another reveal.js plugin for Jekyll

28 Sept 18

dev

I use Jekyll to create my course websites and reveal.js to create my lecture slides. Both of them are awesome, and allow me to focus on writing (hopefully) great content, and the formatting/presentation stuff stays out of the way until I git push the updates to the server.

There are a few ways of making these two tools (Jekyll and reveal.js) play nicely together: see here and here for example. However, most of these require you to put each slide in a new .md file, which is a pain.

What I want to do is to write one .md file per presentation, and have the level 1 and level 2 headings (i.e. # and ##) determine the slide splits (this is pretty much how pandoc does it).

I wrote a simple Jekyll plugin to make this happen—which has just a couple of moving parts

0. download the reveal.js source

It’s step 0 because it’s super easy—just head to GitHub, download & unzip the latest release. You can put it wherever you like in your main site folder; I usually put it in assets/.

1. the revealify filter {#the-revealify-filter}

First, put this code into a revealify.rb file in your Jekyll _plugins directory.

2. add a reveal layout

You’ll need a new layout as well: create a reveal.html file in your Jekyll _layouts directory and make sure that the body tag has this in it (you’ll need to make sure it’s got the right paths & other stuff for your setup). The key part is that first {{ content | revealify }} line—that takes the content of your page (the jekyll .md file with layout: reveal in the frontmatter) and passes it through the “revealify” filter plugin we made earlier.

The configuration stuff here is just the example config from reveal.js, so feel free to tweak to suit your own presentation.

<!-- this is where the reveailfy filter gets applied -->
{{ content | revealify }}

<!-- load the reveal.js css & js (assuming you've put it in assets/)-->
<link rel="stylesheet" href="/assets/reveal.js-3.8.0/css/reveal.css" />
<link rel="stylesheet" href="/assets/reveal.js-3.8.0/css/theme/white.css" />
<!-- Script removed during migration -->

<!-- configure the presentation, (you can tweak options to suit) -->
<!-- Script removed during migration -->
Cite this post
@online{swift2018anotherRevealjsPluginForJekyll,
  author = {Ben Swift},
  title = {Another reveal.js plugin for Jekyll},
  url = {https://benswift.me/blog/2018/09/28/another-revealjs-plugin-for-jekyll/},
  year = {2018},
  month = {09},
  note = {AT-URI: at://did:plc:tevykrhi4kibtsipzci76d76/site.standard.document/2018-09-28-another-revealjs-plugin-for-jekyll},
}