Skip to content
/ prez Public
forked from byteclubfr/prez

Generate Reveal.js slideshows from a set of markdowns

Notifications You must be signed in to change notification settings

OpenWines/prez

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version Dependency Status

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

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 group of vertical slides

Meta

  • --title=<title>: specify the title of your presentation (default = package.json name if found or Prez)
  • --author=<author>: specify the author of your presentation (default = package.json author if found)
  • --description=<description>: specify the description of your presentation (default = package.json description if found)

Theme

  • --theme=<theme>: choose reveal theme (default = solarized)
  • --highlight-theme=<theme>: choose highlight.js theme (default = zenburn)
  • --no-dynamic-theme: disable ability to change theme from query string
  • --print-notes: enable special print layout with first-class notes
  • --such-notes: focus on notes, which will enable a special print layout with notes as first-class content, and more space for them in the notes popup

Live server

  • -w, --watch: automatically rebuild (lazy) on changes
  • --serve[=<port>]: serve slideshow (you can specify port here or use --port)
  • -p <port>, --port=<port>: modify http server port (default 9000), you can use value auto to use a random available port
  • --no-live-reload: disable live-reload when serving slideshow
  • --no-open-browser: do not open local browser automatically when serving slideshow

Print

  • --print[=<file>]: print slideshow as pdf (requires --serve and phantomjs must be installed)
  • --print-theme=<theme>: theme to be used for pdf output (default = no override)
  • --phantomjs=<path to phantomjs>: path to phantomjs (default = phantomjs)

Misc

  • --no-update-notifier: disable version checking

Configuration file

You can store your default preferences in a configuration file. Take a look at CONFIG.md for details.

TODO

  • Lazier reprint in watch mode
  • FIX issue with notes too tall in printed pdf

About

Generate Reveal.js slideshows from a set of markdowns

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 84.9%
  • HTML 8.1%
  • CSS 7.0%