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
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
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!
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.