• Stars
    star
    227
  • Rank 175,900 (Top 4 %)
  • Language
    JavaScript
  • Created almost 10 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate Reveal.js slideshows from a set of markdowns

npm version Dependency Status

prez

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

Install

npm install -g prez

Feel the magic

Check that you have node 6 installed:

node --version
6.x.x

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.

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

  • --init: populate your new presentation with dummy initial data (see the content of data/init)
  • --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.

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
  • --stats: display visual stats about your slides and chapters

Configuration file

You can store your default preferences in a configuration file. Take a look at CONFIG.md for details and see examples on the Wiki.

TODO

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

More Repositories

1

uncloak

A live theme editor for reveal.js (colors, font, sizes...)
JavaScript
104
star
2

node-sync-files

Synchronize files or folders locally, with a watch option
JavaScript
43
star
3

copycast

Live remote copy-pasta explorer for training sessions
JavaScript
39
star
4

node-env-test

Set $NODE_ENV to "test" works best with mocha --require=env-test
JavaScript
37
star
5

js-hal

JavaScript implementation of HAL format
JavaScript
36
star
6

mailbot

Mail Bot: IMAP client sorting entering emails and triggering operations of your choice
JavaScript
33
star
7

node-talon

Port of mailgun/talon (signature detection in mails) from Python to JavaScript
JavaScript
19
star
8

gulp-rss

Generates an RSS file from files with metadata (typically extracted using `gulp-front-matter`)
JavaScript
11
star
9

npm-scripts-tree

Displays npm scripts hierarchies
JavaScript
8
star
10

socket.io-monitor

Monitor sockets, rooms, events in your socket.io server. This module includes the server and client libraries.
JavaScript
7
star
11

manu

Read devdocs.io content from your cozy terminal
JavaScript
6
star
12

node-virtualhost

Very simple virtual host manager for Node.JS (compatible with Express or plain http handlers)
JavaScript
6
star
13

todotxt

Todo.txt parser/serializer for node
JavaScript
6
star
14

node-pushpull

Push/Pull pattern using Redis lists as backend
JavaScript
6
star
15

aggregate-commands

Run a bunch of commands in a single process and log them apart
JavaScript
5
star
16

pleeease-loader

Webpack Pleeease loader
JavaScript
4
star
17

data

JSON files that may be used during training sessions.
3
star
18

socket.io-monitor-cli

CLI client for socket.io-monitor
JavaScript
3
star
19

site

byteclub web site (domain name sadly parked)
CSS
3
star
20

bc-planner

ByteClub planning tool
JavaScript
3
star
21

password-and-confirm-directive

Simple password input and confirm Angular directive
JavaScript
2
star
22

bretzel

Convert an ordered collection of markdown files into a PDF
CSS
2
star
23

fAct

Angularjs application for invoice management with Firebase backend (currently french)
JavaScript
2
star
24

andromaide

GUI to discover promises control flow
JavaScript
2
star
25

react-training

React + JSX + Dev stack (npm, browserify, hot reload) + Redux + Isomorphism + React Router
JavaScript
2
star
26

speedproject

speedproject
JavaScript
1
star
27

byteclubfr.github.io

ByteClub GitHub Homepage
HTML
1
star
28

diapo

HTML
1
star
29

potcommun

Management of a common pot with friends. Application support to an Angular formation.
TypeScript
1
star
30

node-reqrep

Request/Reply pattern using Redis as backend
JavaScript
1
star