Prez NPM | npm.io

prez

Opiniated Reveal slideshow generator with nice PDF output and ability to treat notes as first-class content.

Install

npm install -g prez

Feel the magic

In your terminal, go to an empty directory and run:

prez --init

A sample workspace has been generated for you. Then run:

prez --serve --print --watch

edit your slides from slides folder (html or markdown)
if you need some assets, you can work in images, css, js, media folders and use includes.txt
your slideshow is automatically built into build folder
your slideshow is hosted and your browser is opened to localhost:9000
any change you make will rebuild and refresh your browser
oh, and a printer-friendly slides.pdf is automatically generated on any change too

Slides structure and format

Slides and chapters (vertical stacks) are sorted by name.
If a slide or a chapter name starts with a dot . (hidden), it will be skipped. (or use --keep-hidden)
You can number your slides to ensure order by adding a "number-" prefix, it will be automagically stripped out.
Each slide will have an id generated from filename (removing accents and spaces).
If you use --sub-covers the title is the stripped name, accents and case remain untouched.

Sample structure

images/
js/
css/
slides/
  01-intro.md
  02-Chapter 1/
    01-hello-world.md
    02-bonjour-monde.md
  03-conclusion.md

Sample slide

# Slide's title

Content of your slide

note:

Your notes go here.

Complex (multiline, code samples, etc.) notes are really supported only with --such-notes.

Customize slide attributes

You can set per-slide properties like general style, background or transition by adding special lines at the head of your slides:

$class:some class$ add class
$id:id$ replace automatic id, if you set it to "none", it will remove any id on the slide
Any other property will be added as a data-attribute, here are some examples supported by Reveal:
- $background:/path/to/image.jpg$
- $background-video:/path/to/video.webm$
- $background-iframe:http://mysite.com$
- $transition:zoom$
- $transition-speed:fast$

Step by step

Initialize sample workspace

mkdir sandbox
cd sandbox

prez --init

This will create a full workspace with js, images, etc… where you'll put your custom content. In reality the only required folder is slides.

Build

prez

This will create a build folder with your slideshow.

Show

prez --serve

This will run a server on port 9000 and open your local browser to your slideshow.

Print

prez --print --print-theme=simple

This will generate "slides.pdf" from your slideshow.

Such notes!

Option --such-notes modifies the print layout and the notes popup so that notes have more space.

npm.io

Usage

prez [<source> [<destination>]] [options]

source is the slideshow workspace (where you'll have your slides and assets), default = ./
destination is the target directory, default = ./build/

Available options:

-v, --version: show version and exit
-s <dir>, --slides-dir=<dir>: customize name of the folder containing slides (default = slides)

Assets & slides

--skip-reveal: do not copy reveal.js slides into target directory (useful if you want faster build over existing build)
--skip-index: do not generate index.html in target (will remain untouched if already existing)
--skip-user: do not include user assets
--keep-hidden: render slides or chapters starting with a dot .
--sub-covers: auto generate cover slides with the dir name as a h1 for each chapter (vertical stack of slides)

Custom parser

--parser: parser used to convert slides from Markdown to HTML, available values are:
- marked (default, depending on marked and highlight.js, automatically embedded)
- marky-markdown (requires installation of marky-markdown and note that highlight's themes are not embedded so you'll have to include the CSS file yourself yet)
- markdown-it (requires installation of markdown-it)
- remarkable (requires installation of remarkable)
- Path to custom module, relative to current working directory. This module's default export must be a function taking a string (original content) and return a string (converted content). You can use a custom module when you need to call an external command, or our defaults do not match your preferences. You can browser lib/parsers to look for our implementations.