{
  "$type": "site.standard.document",
  "content": "---\ntitle: \"Another reveal.js plugin for Jekyll\"\ndescription: \"A Jekyll plugin that turns a single markdown file into reveal.js slides,\n  splitting on headings like pandoc does.\"\ntags:\n  - dev\n---\n\nI use [Jekyll](https://jekyllrb.com/) to create my course websites and\n[reveal.js](https://github.com/hakimel/reveal.js/) to create my lecture slides.\nBoth of them are awesome, and allow me to focus on writing (hopefully) great\ncontent, and the formatting/presentation stuff stays out of the way until I\n`git push` the updates to the server.\n\nThere are a few ways of making these two tools (Jekyll and reveal.js) play\nnicely together: see [here](https://github.com/dploeger/jekyll-revealjs) and\n[here](https://medium.com/aerobatic-blog/building-a-reveal-js-presentation-with-jekyll-collections-52bcdba4114a)\nfor example. However, most of these require you to put each slide in a new `.md`\nfile, which is a pain.\n\nWhat I want to do is to write one `.md` file per presentation, and have the\nlevel 1 and level 2 headings (i.e. `#` and `##`) determine the slide splits\n(this is pretty much how\n[pandoc does it](https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc)).\n\nI wrote a simple [Jekyll plugin](https://jekyllrb.com/docs/plugins/) to make\nthis happen---which has just a couple of moving parts\n\n:::tip[Because the source for this]\n[whole blog is on GH](https://github.com/benswift/benswift.github.io/), then you\ncan just head there and see it for yourself if you're the sort of person who\nprefers reading code to prose. Think of this blog post as a \"companion piece\".\n:::\n\n## 0. download the reveal.js source\n\nIt's step 0 because it's super easy---just head to\n[GitHub](https://github.com/hakimel/reveal.js/releases), download & unzip the\nlatest release. You can put it wherever you like in your main site folder; I\nusually put it in `assets/`.\n\n## 1. the revealify [filter](https://jekyllrb.com/docs/plugins/filters/) {#the-revealify-filter}\n\nFirst, put\n[this code](https://github.com/benswift/benswift.github.io/blob/source/_plugins/revealify.rb)\ninto a `revealify.rb` file in your Jekyll `_plugins` directory.\n\n## 2. add a reveal [layout](https://jekyllrb.com/docs/layouts/)\n\nYou'll need a new [layout](https://jekyllrb.com/docs/layouts/) as well: create a\n`reveal.html` file in your Jekyll `_layouts` directory and make sure that the\nbody tag has this in it (you'll need to make sure it's got the right paths &\nother stuff for your setup). The key part is that first\n`{{ content | revealify }}` line---that takes the content of your page (the\njekyll `.md` file with `layout: reveal` in the frontmatter) and passes it\nthrough the \"revealify\" filter plugin we [made earlier](#the-revealify-filter).\n\nThe configuration stuff here is just the example config from\n[reveal.js](https://github.com/hakimel/reveal.js#configuration), so feel free to\ntweak to suit your own presentation.\n\n```html\n<!-- this is where the reveailfy filter gets applied -->\n{{ content | revealify }}\n\n<!-- load the reveal.js css & js (assuming you've put it in assets/)-->\n<link rel=\"stylesheet\" href=\"/assets/reveal.js-3.8.0/css/reveal.css\" />\n<link rel=\"stylesheet\" href=\"/assets/reveal.js-3.8.0/css/theme/white.css\" />\n<!-- Script removed during migration -->\n\n<!-- configure the presentation, (you can tweak options to suit) -->\n<!-- Script removed during migration -->\n```\n\n:::tip[The full [layout](https://jekyllrb.com/docs/layouts/) file will depend]\non how the rest of your site works (where you've put the `reveal.js-x.x.x`\nfolder, etc.) so I haven't included the full file here (you can\n[see it on GitHub](https://github.com/benswift/benswift.github.io/blob/source/_layouts/reveal.html),\nthough). Also remember that you can see the full list of reveal configuration\noptions [in the README](https://github.com/hakimel/reveal.js#configuration). :::\n\n## 3. write your slides as markdown content\n\nFinally, write your content as a regular jekyll post which uses the `reveal`\nlayout, e.g.\n\n```md\n---\ntitle: \"Week 1: intro\"\nlayout: reveal\n---\n\n## Intro\n\n- welcome to the course\n- we're gonna learn all the things\n\n## Timeline\n\n- first, we'll sit in boring lectures...\n- ... then, there will be a huge exam!\n\nfun times.\n```\n\nThen, you get all the niceties of the `jekyll watch` cycle; livereload,\nauto-compilation of scss assets, etc.\n\nAnd if you need to do something interesting with the formatting or layout of\nyour content, then you can just drop straight into writing HTML (as you can\nalways do in a markdown file).\n\n## 4. write amazing content\n\nThis is the hard part. But at least if you've got a nice workflow for actually\nturning your content into nice looking slides then you've got a head start :)\n",
  "createdAt": "2026-05-13T23:15:05.474Z",
  "description": "A Jekyll plugin that turns a single markdown file into reveal.js slides, splitting on headings like pandoc does.",
  "path": "/blog/2018/09/28/another-reveal.js-plugin-for-jekyll",
  "publishedAt": "2018-09-28T00:00:00.000Z",
  "site": "at://did:plc:tevykrhi4kibtsipzci76d76/site.standard.publication/self",
  "tags": [
    "dev"
  ],
  "textContent": "A Jekyll plugin that turns a single markdown file into reveal.js slides, splitting on headings like pandoc does.",
  "title": "Another reveal.js plugin for Jekyll"
}