Grunt task that generates Shower presentations from Markdown source.

npm install grunt-shower-markdown
12 downloads in the last week
43 downloads in the last month

Grunt task that generates Shower presentations from Markdown source


This plugin requires Grunt 0.4.

Install grunt-shower-markdown:

npm install grunt-shower-markdown --save-dev

Add somewhere in your Gruntfile.js:


Add a section named shower into your Gruntfile.js file. See Parameters section below for details.


[title] {string} (default: first line of source file)

Title of presentation (used in <title> tag).

[src] {string} (default: <target>.md)

Path of source Markdown file.

[dest] {string} (default: <target>.html)

Path of result HTML file.

[lang] {string} (default: en)

Language of presentation.

[theme] {string} (default: themes/ribbon)

Path where theme of presentation is located.

[styles] {array|string}

List of CSS files specific to your presentation.

[scripts] {array|string}

List of JavaScript files specific to your presentation.

[progress] {string} (default: true)

Hides progress bar when false.

Any HTML to put before </body>.

Config Example

module.exports = function(grunt) {
        shower: {
            index: {
                title: 'Test presentation',
                src: 'src/',
                styles: 'src/styles.css'
                scripts: [
        watch: {
            shower: {
                files: 'src/*',
                tasks: 'shower'


    grunt.registerTask('default', 'shower');

Presentation markup

# Presentation Title

[Author]( and any other content to show above slides.

!SLIDE #SlideID class1 class2

## Slide Title


<p class="note">Some HTML</p>

- List item one
-? Two (delayed)
-? Three (delayed)

!SLIDE #Cover shoot

## Hello world!


## Code example

@@concat@@: {
    main: {
        text: @@@'Hello world'@@@

Markdown extensions

grunt-shower-markdown uses GitHub flavored Markdown with some extenstions.

Delayed lists

If you want to delay display of list items, put ? after list marker:

- One
-? Two (delayed)
-? Three (delayed)

Text highlighting

You can highlight important parts of presentation using @@text@@ (important) and @@@text@@@ (very important):

@@concat@@: {
    main: {
        text: @@@'Hello world'@@@

Release History

2013-02-18 v0.2.0

  • Grunt 0.4 support.


The MIT License, see the included file.

npm loves you