reveal.js on steroids! Get beautiful reveal.js presentations from Markdown files.
npm install -g reveal-mdreveal-md slides.mdThis starts a local server and opens any Markdown file as a reveal.js presentation in the default browser.
You can use Docker to run this tool without needing Node.js installed on your machine. Run the public Docker image, providing your markdown slides as a volume. A few examples:
docker run --rm -p 1948:1948 -v <path-to-your-slides>:/slides webpronl/reveal-md:latest
docker run --rm -p 1948:1948 -v <path-to-your-slides>:/slides webpronl/reveal-md:latest --helpThe service is now running at http://localhost:1948.
To enable live reload in the container, port 35729 should be mapped as well:
docker run --rm -p 1948:1948 -p 35729:35729 -v <path-to-your-slides>:/slides webpronl/reveal-md:latest /slides --watch- Installation
- Usage
- Docker
- Features
- Markdown
- Theme
- Highlight Theme
- Custom Slide Separators
- Custom Slide Attributes
- reveal-md Options
- Reveal.js Options
- Speaker Notes
- YAML Front matter
- Live Reload
- Custom Scripts
- Custom CSS
- Custom Favicon
- Pre-process Markdown
- Print to PDF
- Static Website
- Disable Auto-open Browser
- Directory Listing
- Custom Port
- Custom Template
- Scripts, Preprocessors and Plugins
- Related Projects & Alternatives
- Thank You
- License
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!```js
console.log('Hello world!');
```You can highlight one line, multiple lines or both.
```python [1|3-6]
n = 0
while n < 10:
if n % 2 == 0:
print(f"{n} is even")
else:
print(f"{n} is odd")
n += 1
```Override theme (default: black):
reveal-md slides.md --theme solarizedSee available themes.
Override reveal theme with a custom one. In this example, the file is at ./theme/my-custom.css:
reveal-md slides.md --theme theme/my-custom.cssOverride 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.cssOverride highlight theme (default: zenburn):
reveal-md slides.md --highlight-theme githubSee available themes.
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 --vertical-separator "^\n\n"Use the reveal.js slide attributes functionality to add HTML attributes, e.g. custom backgrounds. Alternatively,
add an HTML id attribute to a specific slide and style it with CSS.
Example: set the second slide to have a PNG image as background:
# slide1
This slide has no background image.
---
<!-- .slide: data-background="./image1.png" -->
# slide2
This one does!Define options similar to command-line options in a reveal-md.json file that must be located at the root of the
Markdown files. They'll be picked up automatically. Example:
{
"separator": "^\n\n\n",
"verticalSeparator": "^\n\n"
}Define Reveal.js options in a reveal.json file at the project root. They'll be picked up automatically. Example:
{
"controls": true,
"progress": true
}Use the speaker notes feature by using a line starting with Note:.
Set Markdown (and reveal.js) options specific to a presentation with YAML front matter:
---
title: Foobar
separator: <!--s-->
verticalSeparator: <!--v-->
theme: solarized
revealOptions:
transition: 'fade'
---
Foo
Note: test note
<!--s-->
# Bar
<!--v-->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.
reveal-md slides.md -wInject custom scripts into the page:
reveal-md slides.md --scripts script.js,another-script.js- Don't use absolute file paths, files should be in adjacent or descending folders.
- Absolute URL's are allowed.
Inject custom CSS into the page:
reveal-md slides.md --css style.css,another-style.css- Don't use absolute file paths, files should be in adjacent or descending folders.
- Absolute URL's are allowed.
If the directory with the markdown files contains a favicon.ico file, it will automatically be used as a favicon
instead of the default favicon.
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 guts 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 = (markdown, options) => {
return new Promise((resolve, reject) => {
return resolve(
markdown
.split('\n')
.map((line, index) => {
if (!/^#/.test(line) || index === 0) return line;
const is_vertical = /#\^/.test(line);
return (is_vertical ? '\n----\n\n' : '\n---\n\n') + line.replace('#^', '#');
})
.join('\n')
);
});
};and use it like this
reveal-md --preprocessor ./preproc.js slides.mdThere are (at least) two options to export a deck to a PDF file.
Create a (printable) PDF from the provided Markdown file:
reveal-md slides.md --print slides.pdfThe PDF is generated using Puppeteer. Alternatively, append ?view=print to the url from the command-line or in the
browser (make sure to remove the #/ or #/1 hash). Then print the slides using the browser's (not the native) print
dialog. This seems to work in Chrome.
By default, paper size is set to match options in your reveal.json file, falling back to a default value 960x700
pixels. To override this behaviour, you can pass custom dimensions or format in a command line option --print-size:
reveal-md slides.md --print slides.pdf --print-size 1024x768 # in pixels when no unit is given
reveal-md slides.md --print slides.pdf --print-size 210x297mm # valid units are: px, in, cm, mm
reveal-md slides.md --print slides.pdf --print-size A4 # valid formats are: A0-6, Letter, Legal, Tabloid, LedgerIn case of an error, please try the following:
- Analyze debug output, e.g.
DEBUG=reveal-md reveal-md slides.md --print - See
reveal-md helpfor Puppeteer arguments (puppeteer-launch-argsandpuppeteer-chromium-executable) - Use Docker & DeckTape:
The first method of printing does not currently work when running reveal-md in a Docker container, so it is recommended that you print with DeckTape instead. Using DeckTape may also resolve issues with the built-in printing method’s output.
To create a PDF of a presentation using reveal-md running on your localhost using the DeckTape Docker image, use the following command:
docker run --rm -t --net=host -v $OUTPUT_DIR:/slides astefanutti/decktape $URL $OUTPUT_FILENAMEReplace these variables:
$OUTPUT_DIRis the folder you want the PDF to be saved to.$OUTPUT_FILENAMEis the name of the PDF.$URLis where the presentation can be accessed in your browser (without the?view=printsuffix). If you are not running reveal-md in Docker, you will need to replacelocalhostwith the IP address of your computer.
For a full list of export options, please see the the DeckTape github, or run the Docker container with the -h
flag.
This will export the provided Markdown file into a stand-alone HTML website including scripts and stylesheets. The files
are saved to the directory passed to the --static parameter (default: ./_static):
reveal-md slides.md --static _siteThis should copy images along with the slides. Use --static-dirs to copy directories with other static assets to the
target directory. Use a comma-separated list to copy multiple directories.
reveal-md slides.md --static --static-dirs=assetsProviding a directory will result in a stand-alone overview page with links to the presentations (similar to a directory listing):
reveal-md dir/ --staticBy default, all *.md files in all subdirectories are included in the generated website. Provide a custom glob
pattern using --glob to generate slides only from matching files:
reveal-md dir/ --static --glob '**/slides.md'Additional --absolute-url and --featured-slide parameters could be used to generate OpenGraph metadata
enabling more attractive rendering for slide deck links when shared in some social sites.
reveal-md slides.md --static _site --absolute-url https://example.com --featured-slide 5To disable auto-opening the browser:
reveal-md slides.md --disable-auto-openShow (recursive) directory listing of Markdown files:
reveal-md dir/Show directory listing of Markdown files in current directory:
reveal-mdOverride port (default: 1948):
reveal-md slides.md --port 8888Override reveal.js HTML template (default template):
reveal-md slides.md --template my-reveal-template.htmlOverride listing HTML template (default template):
reveal-md slides.md --listing-template my-listing-template.html- Slides is a place for creating, presenting and sharing slide decks.
- Sandstorm Hacker Slides is a simple app that combines Ace Editor and RevealJS.
- Tools in the Plugins, Tools and Hardware section of Reveal.js.
- Org-Reveal exports Org-mode contents to Reveal.js HTML presentation.
- DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks.
- GitPitch generates slideshows from PITCHME.md found in hosted Git repos.
- great slides with reveal markdown
- Create your own auto-publishing slides with reveal-md and Travis CI
- Beautiful presentations from markdown — who knew it could be so easy?
- Using reveal-md to create technical presentations
- Use reveal-md to generate multiple slides and host them on GitHub Page
Many thanks to all contributors!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent