byteclubfr / prez Goto Github PK

View Code? Open in Web Editor NEW

226.0 13.0 43.0 399 KB

Generate Reveal.js slideshows from a set of markdowns

JavaScript 87.75% HTML 6.44% CSS 5.81%

reveal-js

prez's Introduction

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.

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

prez's People

Contributors

Stargazers

Watchers

Forkers

mralex beetaa openwines dholmes npanau cucumber-ltd nbussman kandran jordietyahii mariobinder xnum chenruibin kfbishop faxg mwasyou egoughnour hlm saschagr mharrodil rlugojr zhehe clementhannicq davidka sigmun pathcl zoosky patbonecrusher wasadigi abe-frickelbude brabster ls-andrade jwgrenning mere-teresa davidrajm jimbuck franciscoj yuangui caiofcm bilki abannany menedev cbfacademy fducom

prez's Issues

How to change the reference of phantomjs to phantomjs-prebuilt?

It seems like phantomjs is been deprecated and renamed it to phantomjs-prebuilt. So, the reference for phantomjs should be typically changed to phantomjs-prebuilt.

How to do that?

prez deploy

It'd be super handy to be able to have prez deploy copy dist/ over to the gh-pages branch, commit, and push.

How to modify reveal.js used to generate the build dir?

Hi. If I modify the build folder (add plugins, touch to index.html for plugin initialization, default theme, etc), these changes are overwritten each time I launch prez, unless I use the --skip-reveal and/or --skip-index options, right?

Seems reasonable, given it's a build folder. At the same time, one should be able to tune the underlying reveal.js without having it overwritten each time. Is this possible?

remove such-notes options

It appears to be supported by reveal 3.4 https://github.com/hakimel/reveal.js/releases/tag/3.4.0

Things to check:

code highlighting in notes
notes printing

Multiple slides in a single file

Dear all,
I tried out prez because I was looking for a way to split a reveal.js presentation into several logical parts. As I understood, each single slide goes into an individual file – and that's not what I expected and not what I want. Is there any way to pack several slides into a single source file?

I tried to place ---, , <section> – nothing helps. I also could not found this in the source code, so I concluded that this simple feature is missing. The documentation also does not say anything explicitly on this topic.

update lodash to 4.x

Fragments

Hello,

How do I add fragments in my markdown file?
I know reveal.js has some support for fragments
https://github.com/hakimel/reveal.js#element-attributes

but I'm very new to Javascripts, and I don't how to get the markdown parser to convert my
text into something like that.

TIA,
Joy

sub-covers : from underscore to space

--sub-covers should replace the underscore _ from the file name with a space in the cover.

Add node prerequisite

When trying 'prez --init' on node 5, I get this error :

> sandbox node -v
v5.3.0
> sandbox prez --init
/usr/local/lib/node_modules/prez/lib/cli.js:5
var { merge } = require("lodash/fp");
    ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/prez/bin/prez.js:7:11)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)

Destructuring seems to be unavailable in Node 5, it needs a flag to work (node --harmony_destructuring).

Moving to Node 6 allow prez to work :

> sandbox node -v
v6.2.2

Documentation should reflect this prerequisite, either :

a way to activate the harmony flag
move to Node6

is prez development active/supported?

There hasn't been a release in 3 years, and no commits in almost 2.

Is this project still active?

Error on watch

Hey guys,
when I try to prez --watch or prez --serve --watch, I get the following error:

[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/data/dynamic-theme.js to build/js
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/css to build
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/js to build
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/lib to build
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/plugin to     build
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/node_modules/highlight.js/styles     to build/css/highlight
[info] copy css to build
[info] copy js to build
[info] copy images to build
[info] copy media to build
[info] copy ../../../../../../../../usr/local/lib/node_modules/prez/data/index.html to build
[info] write build/index.html (3859 bytes)
[info] serve slideshows from build…
[info] started server live-reload on port 35729
[info] started server http on port 9000

fs.js:1062
    throw errnoException(process._errno, 'watch');
          ^
Error: watch EMFILE
    at errnoException (fs.js:1030:11)
    at FSWatcher.start (fs.js:1062:11)
    at Object.fs.watch (fs.js:1087:11)
    at watch (/usr/local/lib/node_modules/prez/node_modules/node-watch/lib/watch.js:221:8)
    at /usr/local/lib/node_modules/prez/node_modules/node-watch/lib/watch.js:230:9
    at /usr/local/lib/node_modules/prez/node_modules/node-watch/lib/watch.js:41:14
    at Array.forEach (native)
    at /usr/local/lib/node_modules/prez/node_modules/node-watch/lib/watch.js:38:18
    at Object.oncomplete (fs.js:107:15)

Can you may be help me with that? Thanks!

Cheer Nils

navigation ceases and doesn't follow pattern

i have 01-intro.md, 02-wat.html , 03-why.md, then the rest of the boilerplate that comes with an prez --init. out of the .html slide, i can only navigate down to 03-why.md, and on to 04-... then it resets before making it to the actual child content in stacked slides.

--stats does not work

When running the misc --stats option I just get a normal build

prez --stats
[warn] Source folder not specified: use cwd
[warn] Destination folder not specified: use 'build'
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/dynamic-theme.js to build/js
[info] copy ../../../../../../../usr/lib/node_modules/prez/node_modules/reveal.js/css to build
[info] copy ../../../../../../../usr/lib/node_modules/prez/node_modules/reveal.js/js to build
[info] copy ../../../../../../../usr/lib/node_modules/prez/node_modules/reveal.js/lib to build
[info] copy ../../../../../../../usr/lib/node_modules/prez/node_modules/reveal.js/plugin to build
[info] copy ../../../../../../../usr/lib/node_modules/prez/node_modules/highlight.js/styles to build/css/highlight
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/such-notes-print.js to build/js
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/such-notes-print.css to build/css
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/such-notes-popup.css to build/css
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/such-notes-popup.js to build/js
[info] write build/plugin/notes/notes.html (10242 bytes)
[warn] cannot copy css (file not found)
[warn] cannot copy js (file not found)
[info] copy images to build
[warn] cannot copy media (file not found)
[info] copy ../../../../../../../usr/lib/node_modules/prez/data/index.html to build
[info] write build/index.html (15085 bytes)

I'm pretty up-to-date:

prez --version
4.7.0

and

node --version
v5.9.1

Add an option to specify generated <title>

Consider using CDN for referenced assets

Would you consider an alternative to the initial project template to use src references to a CDN host instead of the localized versions?

How to add 3rd party reveal js plugins to prez?

I would like to add 3rd party RevealJs plugins to prez. Is this possible? What would be the best approach?

In RevealJs I would normally just include these plugins in index.html within the Reveal.initialize block:

<script>
	Reveal.initialize({
                         // ...
		dependencies: [
                               // ...
			{ src: 'plugin/tagcloud/tagcloud.js', async: true },
			{ src: 'plugin/badges/badges.js'},
                                // OTHER PLUGINS GO HERE
		],
		badges: { /* SAMPLE PLUGIN CONFIG... */ }
	});
</script>

Does prez provide a similar way for including plugins on a per-project basis?

Enable markdown tables of any kind

Tables supported by marked do not work with prez. Did not actually check all the renderers.

fs-extra upgrade

It can't be bump yet because of the (buggy) new way handling white list to copy reveal files:

jprichardson/node-fs-extra#350

Ability to customize slides syntax parser

Keep marked as a default
Make it a ~~peer~~ optional dependency (optional favored to keep it as a sane default without requiring user to install it manually, may be changed later)
Allow author to change parser by depending on the module of his choice

Caveat: parsers won't have all the same API :(

White-list known parsers and go for a consolidate-like for Markdown parsers?

Investigate reveal-code-focus integration

http://d10.github.io/reveal-code-focus/#/

How can I add a custom CSS to the build presentation?

I've been doing ugly things all over the place. It works as I need it to, but I'm not satisfied

Is there a way to provide a custom CSS file to the final built presentation?

changing highlight.js theme results in plain white text

If I use the --hightlight-theme switch, it results in plain white text on a black background regardless of which theme I choose. This is with the "Night" slide theme.

GitPitch support

Is that possible to serve GitPitch (based on revealjs) presentation offline?

Allow configuration via file

Awesome stuff!

Would you be interested in adding configuration (mainly themes) via file?

Math rendering

Hello,

would it be possible to make math rendering available by default. I set it up
on my system using https://github.com/j13z/reveal.js-math-katex-plugin, and it works
without requiring MathJax (and therefore, an internet connection)

Problems using custom parser

I try to use a custom Markdown parser by setting parser = ./custom-markdown-parser in my .prezrc file.

However, I keep getting the following error:

/usr/lib/node_modules/prez/lib/convert.js:32
        throw new Error("Error while loading parser '" + parser + "' (" + e1 + ")");
        ^

Error: Error while loading parser './custom-markdown-parser' (Error: Cannot find module './parsers/./custom-markdown-parser')

The problem seems to be that the script never looks for my custom parser in my local project dir instead of the global prez install path.
In convert.js:20, it seems to never enter the // No module: try to load user implementation conditional branch.

If I modify the line to omit the && e1.message.indexOf("'" + parser + "'") !== -1) condition, it works. (But I guess that condition has a reason to be there?)

PDF file, all pages are blank

After running a prez, a pdf is created but each slide is blank (white). There is a page for each slide.

There is a warning during the install.

[warn] Source folder not specified: use cwd [warn] Destination folder not specified: use 'build' [info] copy ../../../../../usr/local/lib/node_modules/prez/data/init/css to [info] copy ../../../../../usr/local/lib/node_modules/prez/data/init/images to [info] copy ../../../../../usr/local/lib/node_modules/prez/data/init/includes.txt to [info] copy ../../../../../usr/local/lib/node_modules/prez/data/init/js to [info] copy ../../../../../usr/local/lib/node_modules/prez/data/init/slides to [info] copy ../../../../../usr/local/lib/node_modules/prez/data/dynamic-theme.js to build/js [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/css to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/js to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/lib to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/plugin to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/highlight.js/styles to build/css/highlight [info] copy css to build [info] copy js to build [info] copy images to build [warn] cannot copy media (file not found) [info] copy ../../../../../usr/local/lib/node_modules/prez/data/index.html to build [info] write build/index.html (5383 bytes)

Running the prez

$ prez --serve --print --watch [warn] Source folder not specified: use cwd [warn] Destination folder not specified: use 'build' [info] copy ../../../../../usr/local/lib/node_modules/prez/data/dynamic-theme.js to build/js [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/css to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/js to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/lib to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/reveal.js/plugin to build [info] copy ../../../../../usr/local/lib/node_modules/prez/node_modules/highlight.js/styles to build/css/highlight [info] copy css to build [info] copy js to build [info] copy images to build [warn] cannot copy media (file not found) [info] copy ../../../../../usr/local/lib/node_modules/prez/data/index.html to build [info] write build/index.html (5383 bytes) [info] serve slideshows from build… [info] started server live-reload on port 35729 [info] started server http on port 9000 [info] [phantom] Export PDF: Reading reveal.js config [1/4] [info] [phantom] Export PDF: Preparing print layout [2/4] [info] [phantom] Export PDF: Preparing pdf [3/4] [info] [phantom] Export PDF: Writing file [4/4] [info] [phantom] Export PDF: Finished successfully! [info] print slides.pdf (OK)

How to set page size & resolution for PDF output?

Currently, --print produces PDF output where the page size is determined by the screen resolution of the machine prez is running on. This is fairly unreasonable if you're running it on a machine with high resolution, especially since the slides don't scale in notes view.

In reveal.js, you format using print.css. In PhantomJS you're supposed to add some js snippets. I'm unclear on how this is handled in Prez. Hints?

Code Syntax Highlighting does not work consistently

Hi there
I was trying to use the syntax highlighting and it seems to only work for some of my code blocks. If I manually uncomment the plugin definition of reveal.js in the index, it seems to work correctly.

Is it possible that this should not be commented out?
See:
https://github.com/byteclubfr/prez/blob/master/data/index.html#L60

Add an option to auto generate subdirs index slides

This option should generate "cover" slides containing just a h1 tag with the name of the current subdir.
For example here, a slide with # Foo should be generated before first-topic

./slides
./01-Foo
./010-first-topic.md
./020-seconde-topic.md

Wrong commands behavior

For example when doing prez --print the expected behavior is to just render the PDF, but actually that is also serving. This is an invisible default behavior.

prez --print --serve, prez --print and prez --serve should have different behavior.

Per-directory data-* attributes

I'm not sure whether this is just a question or a feature request, but here it is:
We've got training material at http://ants.builders/training/#/ that I've been working on converting to prez ( anthill/training#9 ).
Among other things, for each "section", we use a different color. The only way I've been able to implement this was by copy/pasting the color on every slide.

Is there a way to provide data attributes per-(slide-directory)?

Strange math rendering issue

I ran into a strange math rendering issue today which I believe I can only connect to prez.

I had the following equation I was trying to display:

$$ v_x = \lim \limits_{\Delta t \to 0} \frac{\Delta x}{\Delta t} = \frac{dx}{dt} $$

Testing with just MathJax and with just reveal.js, this renders correctly. Prez will not correctly render. It seems that the underscore after \limits is causing it to fail.

As a temporary fix, I can include the expression as an graphic, but I'm puzzled why this happens in prez.

Also, curious. Is there a reason to specifically use live reload and not browser-sync?

Add CSS id support for <section>

To ease the creation of TOC and links inside the prez.

Wrong syntax coloration behaviour

When writing multi-line code from markdown without specifying class there is syntax coloration but that shouldn't and the no-highligt class is not present.

And it seems there is not all highlight.js styles.