reveal-md

reveal.js on steroids! Get beautiful reveal.js presentations from your Markdown files.

Installation

npm install -g reveal-md

Quick demo

reveal-md demo

Markdown in reveal.js

The Markdown feature of reveal.js is awesome, and has an easy (and configurable) syntax to separate slides. Use three dashes surrounded by two blank lines (\n---\n). Example:

# Title

* Point 1
* Point 2

---

## Second slide

> Best quote ever.

Note: speaker notes FTW!

The separator syntax can be overriden (e.g. I like to use three blank lines).

Speaker Notes

You can use the speaker notes feature by using a line starting with Note:.

Usage

To open specific Markdown file as Reveal.js slideshow:

reveal-md slides.md

You can also provide a url that resolves to a Markdown resource (over http(s)).

reveal-md https://raw.github.com/webpro/reveal-md/master/demo/a.md

Show (recursive) directory listing of Markdown files:

reveal-md dir/

Show directory listing of Markdown files in current directory:

reveal-md

Override theme (default: black):

reveal-md slides.md --theme solarized

Override reveal theme with a custom one:

# you'll need a theme/my-custom.css file
reveal-md slides.md --theme my-custom

Inject custom scripts into the page:

reveal-md slides.md --scripts script.js,another-script.js

Override reveal theme with a remote one (use rawgit.com because the url must allow cross-site access):

reveal-md slides.md --theme https://rawgit.com/puzzle/pitc-revealjs-theme/master/theme/puzzle.css

Override highlight theme (default: zenburn):

reveal-md slides.md --highlightTheme github

Override slide separator (default: \n---\n):

reveal-md slides.md --separator "^\n\n\n"

Override vertical/nested slide separator (default: \n----\n):

reveal-md slides.md --verticalSeparator "^\n\n"

Override port (default: 1948):

reveal-md slides.md --port 8888

Disable to automatically open your web browser:

reveal-md slides.md --disableAutoOpen

Live-reload

Using -w option changes to markdown files will trigger the browser to reload and thus display the changed presentation without the user having to reload the browser.

YAML Front matter

You can set markdown options and revealoptions specific to your pressentation in the .md file with YAML front matter header Jekyll style.

---
title: Foobar
separator: <!--s-->
verticalSeparator: <!--v-->
theme: css/theme/solarized.css
revealOptions:
    transition: 'fade'
---
Foo

Note: test note

<!--s-->

# Bar

<!--v-->

Print Support

Requires phantomjs to be installed (preferably globally)

This will try to create a pdf with the passed in file (eg slides.md) and outputted to the name passed into the --print parameter (eg slides.pdf)

reveal-md slides.md --print slides.pdf

Options

You can define Reveal.js options in a reveal.json file that you should put in the root directory of the Markdown files. They'll be picked up automatically. Example:

{
    "controls": true,
    "progress": true
}

Custom slide attributes

You can use the reveal.js slide attributes functionality to add HTML attributes, e.g. custom backgrounds. Alternatively you could add an HTML id attribute to a specific slide and style it with your own CSS.

If you want yor second slide to have a png background:

# slide1

This slide has no background image.

---

<!-- .slide: data-background="./image1.png" -->
# slide2

This one does!

Markdown preprocessor

reveal-md can be given a markdown preprocessor script via the --preprocessor (or -P) option. This can be useful to implement custom tweaks on the document format without having to dive into the guys of the Markdown parser.

For example, to have headers automatically create new slides, one could have the script preproc.js:

// headings trigger a new slide
// headings with a caret (e.g., '##^ foo`) trigger a new vertical slide
module.exports = (mkd,opt) => 
    mkd.split( "\n" )
        .map( line => {
            if ( ! /^#/.test(line) ) return line;

            var is_vertical = /#\^/.test(line);

            return ( 
                is_vertical ? "\n\n<!--v-->\n\n" : "\n\n---\n\n"
            ) + line.replace( '#^', '#' );
        })
        .join("\n");

and use it like this

$ reveal-md -P preproc.js slides.md

Notes

reveal-md always starts a local server and opens the default browser
From any presentation, navigate to the root (e.g. http://localhost:1948) to get directory listing of (linked) Markdown files. Root folder is resolved from Markdown file (or directory) reveal-md was started with.

License

MIT

PeterHancock/reveal-md