Automated Reveal.js setup

This post outlines my efforts to bring in markdown focused workflow for creating presentations. The tool allows setting up automated workflow leveraging markdown and Reveal.js.

Reveal.js has teased me for many days to Leave powerpoint/impress and try it. I never gave it a serious thought, as my existing setup was working just fine. But as now i have started to use markdown a lot .I realised the need for clean plaintext version of data and capabilities to present it easily and quickly. So i started to read about reveal.js and how to use it.

General reading around reveal.js suggested that people were either writing HTML, directly copy pasting markdown or relying on external tools like pandoc.

So the general use case i observed is as following:

  1. Write slides in markdown.
  2. Convert slides from markdown to reveal.js format (using pandoc)
  3. Place converted index.html and git clone reveal.js in same folder.
  4. To present launch the html file in browser full screen.

Advantage of this approach:

  1. Markdown is neutral in nature if written properly
  2. No need of a server style hosting or running your own python simple server

Disadvantages:

  1. If even a word is changed the steps 1 and 2 needs to be repeated.
  2. Once those changes are done browser needs to be refreshed or reopened.

At this point i saw multiple set of repetitions, so wanted to optimise and automate this approach. This is the point where i identified that reveal.js also supports external markdown syntax (silly me for not reading the README carefully the first time). However it had one caveat, the markdown needs to be served via web server for browsers to pick it up.

This is what led to my current automated setup. In short this one screenshot should showcase how simple it becomes to run presentations using this.

Reveal.js Automation setup
Reveal.js Automation setup

So what i have as my current setup is

  1. A bash script called “present” (glue for all : the heart/brain)
  2. Folder where git clone of reveal.js is placed
  3. Customised index.html with placeholder text

So after doing this one time effort this is how my setup looks like.

  1. Write markdown in any arbitrary location.
  2. “present setup” (if md file name is anything other then presentation.md then specify it) : This still looks like how we do pandoc however the additional commands is where the beauty of the script lies in.
  3. “present” : This is one command which performs following operations
    1. Start a python simpleHTTP server
    2. Based on the predefined browser path, start a browser (chrome / chromium) with url of index file in it.
  4. present print” : This performs similar steps (start webserver and lauch browser) but it also appends “?print-pdf” in the url which informs reveal.js to present slides in printable format.
  5. “present clean” : This will clean all the additional resource i.e. index.html and reveal.js

This setup allows me to continue working on markdown file and all i need to do is change file in markdown save and go back to browser refresh page to get the output reflected.

Once presentation is done and you close the browser then it automatically kills the python server that was started. (and hence not leaving stale bits.)

The fourth command : “present print” was added to ensure we are able to quickly create distributable copies of the presentation.

So without further ado here is the script

[github userid=”anantshri” repoid=”automated_revealjs” path=”present” language=”bash”]

The project is available at github

https://github.com/anantshri/automated_revealjs/

I have uploaded the whole script over at github so that it can be used by others and can be overall improved. Feel free to fork it ,hack it and customise it to your satisfaction. (If you think the setup might help others feel free to share it across)

6 thoughts on “Automated Reveal.js setup”

  1. Why not use the grunt serve command for serving the presentation?

    Will using regular server impact plugins like Slide Notes?

    1. regular server doesn’t impacts the plugins, so far all used plugins: slide notes, presenter support etc. have all worked fine.
      As for grunt, its just not yet in my personal workflow. been using bash and comfortable in customising stuff in it is why i wrote this.

      1. I suppose i misunderstood the question about using grunt serve. why grunt serve doesn’t make sense is coz we are not using the stock index.html rather the index.html is kept one level up and reveal.js folder is just used as dependencies. hence running grunt serve without modification will not serve the purpose and i prefer not to temper with external dependencies as little as possible.

  2. Using Mac Yosemite
    Cloned reveal.js to /User/Harshad/Dev.reveal.js
    Cloned present to /User/Harshad/Dev/present_workflow

    Using Chrome as browser so added the following line at line no 32
    BROWSER=”/Applications/Google Chrome.app/Contents/MacOS/Google Chrome”

    Base variable –
    BASE=”$HOME/Dev/present_workflow”

    Then when I run the default present_intro.md from your repo I get the following error


    ./present setup present_intro.md
    Present : Reveal.js Workflow Automation
    Created by: Anant Shrivastava
    setup for specific slide md file
    File Name is present_intro.md
    Setting up presentation for this folder

    ln: ./reveal.js: File exists
    ln: ./resources: File exists
    Thanks for using present service

    Also when I try to run it

    ./present
    Present : Reveal.js Workflow Automation
    Created by: Anant Shrivastava
    ./present: line 45: /Applications/Google: No such file or directory
    Thanks for using present service

    I am interested in this project and would like to extend it.

    1. P.S. – Tried both the combinations for Google Chrome

      BROWSER="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
      BROWSER="/Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome"

      Also installed Chromium browser. Was able to run the presentation ./present but ended up getting a blank Chromium window.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top