A wrapper for RevealJS that allows you to write the slides in Jade


Use server side Jade templates to create Reveal.js slideshows using Grunt.

You can create slides in a Jade file. For example the following would create a simple RevealJS slideshow:

    h1 Slideshow
    img(src="{%= assetsDirectory %}/logo.gif", alt="logo")
    h2 Title
        code(data-trim, contenteditable).
            $.when(that(), other())
    h2 The End

There are two ways to use this NPM.

  1. The suggested way is to use grunt-init to create a project scaffolding with grunt-reveal-jade as a dependency, as well as a setup for livereload, and deployging to gh-pages.

  2. or you can simply include this NPM as a dependency and build your own project.

To get a project setup using grunt-init with grunt-reveal-jade:

  1. make sure grunt-init was installed globally using
npm install -g grunt-init
  1. load the grunt-init template for grunt-reveal-jade using:
git clone ~/.grunt-init/reveal-jade  
  1. now setup your project scaffolding using
grunt-init reveal-jade

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-reveal-jade --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


Or you can install all grunt npms using the matchdep npm and:


In your project's Gruntfile, add a section named reveal to the data object passed into grunt.initConfig().

  reveal: {
    options: {
      // Task-specific options go here. 
    your_target: {
      // Target-specific file lists and/or options go here. 
  • slides: the directory you will store your Jade files in.
    • default: "slides"
  • build: the directory the HTML slides we be placed into
    • default: "build"
  • temp: the directory and intermediate build is placed. This directory is created and deleted before the completion of the build task.
    • default: "temp"
  • assets: Directory that will be adding from your root to the build, for images, etc.
    • default: "assets"
  • cleanBuild: a boolean indicating whether the build directory should be deleted before a new build.
    • default: true
  • title: The title tag for the slideshow
  • description: Meta tag description for the slideshow
  • author: Author meta for the slideshow
  • theme: The Reveal theme for the slideshow
    • default: "default"
    • Available themese are in /reveal/css/theme
  • syntax: The syntax highlight css for the slideshow
    • default: "zenburn"
  • controls: true
  • progress: true
  • history: true
  • center: true
  • transition: The type of transition from slide to slide. Available possibilities are:

default/cube/page/concave/zoom/linear/none * default: default

I'll be adding more options to pass through to RevealJS. To see an example of how to hook up live reload with RevealJS see this Gruntifle.

I'll be adding a grunt-init with livereload options soon.

  reveal: {
    mySlides: {}

To run use grunt reveal

You only have to write the individual sections. Use Jade to create the HTML that you would normally add to your RevealJS' index.html

    h1 Slide 1
    h2.fragment Subtitle!
    h2 Slide 2
        code(data-trim, contenteditable).
            alert("Syntax highlighting!");

Use Jade to create your slides.

It's good to know that a period at the end of a line is equiavalen to a pipe at the beginning of the next lines. For example, here is how to do syntax highlighting:

        code(data-trim, contenteditable).
            function linkify( selector ) {
              if( supports3DTransforms ) {
                var nodes = document.querySelectorAll( selector );
                for( var i = 0, len = nodes.length; i < len; i++ ) {
                  var node = nodes[i];
                  if( !node.className ) ) {
                    node.className += ' roll';

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

  • 0.0.4 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.3 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.2 2013-07-10 - Trying to fix NPM out of synch issue
  • 0.0.1 2013-07-10 - Initial release