A quick note on using reveal.js

I’ve been using Reveal.js for my course slide decks and for most presentations I’ve been giving of late. I like writing my presentation in markdown – quickly banging out ideas – and then feeding that markdown into Reveal. This has the added benefit that I can use Pandoc to create handouts or whatever super duper quickly.

If you write your slidedeck for Reveal.js in html from the word go, you can of course do a whole lot more and take full advantage of what Reveal offers. Perhaps you can do this in a markdown source file too, but for my needs, basic slides with either full screen images or centred images is all I need.

Here’s how I do it.

Begin by forking my presentations repository, (make sure your fork is a gh-pages branch). Then, rename one of my html files to your presentation name. 

Take for instance https://github.com/shawngraham/presentations/blob/gh-pages/bash.html

Rename it ‘my-cool-presentation.html’ or whatever. Check to make sure this loads up by going to <yourusername>.github.io/presentations/my-cool-presentation.html.

Then, at line 45, change the name of the markdown file between the quotes to your own file: 

Screen Shot 2016-05-31 at 9.46.17 AM

so, data-markdown="bash.md" is telling Reveal to use bash.md as the source file. The next two lines (46 & 47) separate your content in your source markdown file; slides you want to go off to the right you mark off with --- and slides that go down the page are marked off with --. You can put your speaking notes in the slide by making sure Note: starts a new line; everything that follows will not be displayed (but can be seen if you use the speaker’s view whilst presenting).

To see  all this in action, go to:


And hit esc – you’ll see that the slides extend out to the right, and down to the bottom. (Hit s and you’ll see any notes I’ve left in there). If you look at the source md RAW,


you’ll see how those separators work out in practice. You’ll also note that you can mix a bit of html into the markdown as well to do things like full-screen backgrounds, movies, etc. Now, if you’re making a whole bunch of changes and working directly in github, it sometimes takes a while for your changes to show up and/or your browser cache might not show your latest changes. What I do is make all my changes locally, and spin up a server to display my changes to me as I make them with

`$ python -m SimpleHTTPServer 8000`

Then I commit and push my changes. Knock yourself out.