reveal.js is a popular open source library for creating PowerPoint-style presentations in the web browser with HTML/CSS. We’ve written a Jekyll plugin called jekyll-revealify-plugin to make it easy to use this library as part of your CECS Jekyll site. You can see it in action for COMP1720 and COMP2300.

In older versions of the theme (pre S1 2021) we used to package reveal.js directly with the Course in a Box. If you’re running an old version, the transition isn’t too tricky, but it might be worth getting in touch to get some help updating things.

Installing the plugin#

The jekyll-revealify-plugin is included by default in the latest versions of the Course in a Box template, although if you’re using a version prior to Semester 1 2021 you’ll need to add it yourself by modifying your Gemfile as follows:

group :jekyll_plugins do
  ... # gems for jekyll-theme-cecs and jekyll-plugins-cecs are included here

  # add this line
  gem "jekyll-revealify-plugin", :git => "git@gitlab.anu.edu.au:jekyll-anu/gems/jekyll-revealify-plugin.git", :branch => 'master'
end

Basic guide to reveal.js revealify#

A note on terminology: reveal.js is the library for turning HTML documents with a specific structure into nice-looking presentations, and “revealify” (or jekyll-revealify-plugin) is the name of a Jekyll plugin for automatically turning your .md files into HTML files with that required structure.js with Jekyll.

reveal.js has its own HTML format (based on <section> tags) that it uses to determine breaks in slides and other formats, but this can be unwieldy when you’re writing slides in Markdown for Jekyll. The jekyll-revealify-plugin provides a Jekyll layout, which makes it easy to write and host reveal.js slides on your site. This layout (named “reveal”) is automatically included into your site when you install the revealify gem. It has some sane defaults set up, so once you’ve made a new page with it you can just get started.

Instead, using the jekyll-revealify-plugin a typical presentation with revealify might look like:

---
layout: reveal
---

# welcome to my talk

today we're learning about the internet!

## history lesson

but first we need a history lesson...

---

- built on tcp/ip
- used by a bunch of people

---

- more information would go here

## so how do you make your own internet?

let's find out!

In this example there are 5 slides.

Slides are split at ---, #, ## and ###. So, generally, mark a new topic (or sub-topic) with the header tags and split content of the same topic into different slides with ---.

If for whatever reason you need to use HTML elements, you can also break new slides by wrapping a slide in <section> and </section> tags.

<section>
  <!-- i can add whatever HTML I want to in here! -->
  <iframe src="https://google.com">
  </iframe>
</section>

By default, the theme for your reveal slides is set to the default “white” theme (“reveal.js/css/theme/white.css”). You can change this in either the front matter of your individual page, or in your the revealify.theme variable of your global site config. If you’re using jekyll-theme-cecs, there’s an ANU styled theme at “assets/reveal.js/anu.scss”. You may also use any of the other default themes, which can be found in the jekll-revealify.

Setting up your slides#

The default “reveal” layout has a couple of options you can change, but in order to do so you will need to create a new layout which inherits the “reveal” layout.

Now there are a couple other variables we can configure:

  1. theme — this is the path of the theme you want your slides to follow. more info is provided above.

  2. plugins — this is an array of strings, each pointing towards the path of a reveal plugin file. if you want to include plugins in your slides, you’ll need to do so here.

  3. config — this is a string which will be plopped into the reveal config. the reveal.js website provides a well documented explanation of all the options available here. it should be in the form of a JavaScript object.

So, if I wanted to make a “lectures” layout that configured some of the reveal properties, in a file named lectures.html I’d write:

---
layout: reveal

plugins:
  - ...

config: |
 {
  ...
 }
---

{{ content }}

You can’t configure these variables on a page-by-page basis–so adding “plugins” or “config” objects to your front matter won’t do anything!

Multiple layouts#

If you want to have presentations with different themes, you’ll just need to create a new layout as specified above, then make sure your slides are set to that layout.

arrow-left bars search times