Skip to content

Latest commit

 

History

History
269 lines (212 loc) · 6.97 KB

README_EN.md

File metadata and controls

269 lines (212 loc) · 6.97 KB
Raw

nodePPT - This is probably the best web presentation tool so far!

中文说明：README

NPM NPM Inline docs

why nodePPT?

  • markdown based on GFM;
  • mix-code with html and markdown
  • export your work with html and pdf format;
  • 18 different transition animations, and you can choose single page animation well;
  • Setting one page background image different than others;
  • overview mode, multiscreen mode, remote control with socket, shake to page-flipping with ipad/iphone;
  • canvas is also supported, with socket, we sync your multiscreen in real time, and you can type some notes;
  • syntax highlighting of course, and you may want to customize your syntax highlighting style, it's supported well;
  • Animation in single page, one-step animation;
  • themes：colors-moon-blue-dark-green-light
  • forward and backward callback function

1.2.0 new features

  • real time sync canvas drawing across multiple devices
  • watch
  • add buttons to control page-flipping
  • bugs fixed

demo

customize your theme

  • default theme is not cool? just customize your theme! take a look with theme.moon
  • write your customize theme's template path in setting md:
title: presentation title
speaker: author name
url: http://your.site
transition: zoomin/cards/slide/...
files: /path/to/your/theme.css

install

# get help
nodeppt start -h
# bind given port
nodeppt start -p <port>
nodeppt start -p 8090 -d path/for/ppts
# bind host, default value: (0.0.0.0)
nodeppt start -p 8080 -d path/for/ppts -H 127.0.0.1
# socket (type 'Q' to show/hide QR Code, use your phone scan it, and you can control the slider)
# if your want to use socket, notice the follow:
		* 1, make sure that your phone and your pc/mac is allowed to access to each other
		* 2, the firewall
		* 3, ip

how to start socket?

with url params
http://127.0.0.1:8080/md/demo.md?controller=socket

type 'Q' in page to show the QR Code, scan it, and you can control the slider on your phone: swipe or touch or shake to page-flipping

or use 'start' command:
nodeppt start -c socket

type 'Q' in page to show the QR Code, scan it, and you can control the slider on your phone: swipe or touch or shake to page-flipping

how to start postMessage:

http://127.0.0.1:8080/md/demo.md?_multiscreen=1

export your ppt

share your awesome slider with others, why not?

export to pdf format:

need to install phantomjs

npm install -g phantomjs
# start nodeppt server
nodeppt start
# export file
nodeppt pdf http://127.0.0.1:8080/md/demo.md a.pdf

export to html

# get generate help
nodeppt generate -h
# generate command
nodeppt generate filepath
# export all project file, include js, img, css folder
# export to publish folder default
nodeppt generate ./ppts/demo.md -a
# export to given folder
nodeppt generate ./ppts/demo.md -a -o output/path

export all ppt file and generate ppt list index:
```bash
nodeppt path -o output/path -a

markdown syntax

nodeppt supports marked syntax, but for greater ppt, we extend the next syntax:

settings

title: presentation title
speaker: author name
url: http://your.site
transition: zoomin/cards/slide/...
files: path/to/js/or/css/files

directory relationship:

support the followed animations:

  • kontext
  • vkontext
  • circle
  • earthquake
  • cards
  • glue
  • stick
  • move
  • newspaper
  • slide
  • slide2
  • slide3
  • horizontal3d
  • horizontal
  • vertical3d
  • zoomin
  • zoomout
  • pulse

if you want set single page animation, go to single page animation setting

[slide style="background-image:url('/img/bg1.png')"]
# slide with background image
## I'm subtitle

single page ppt top-down layout

[slide]
## home page stylesheet
### ---- boundary
----
nodeppt is a ppt webapp coded by nodejs
nodeppt: https://github.com/ksky521/nodePPT

code formatting

the same as Github Flavored Markdown

single page animation

on the top of the md file, you can set global transition animation in setting, if want to set single page transition animation, use the followed syntax:

[slide data-transition="vertical3d"]
## this is a vertical3d transition animation

insert html code

If want to diy your ppt total, you can directly use html tag. As you see, mixed-code with html and markdown is supported well. For example:

<div class="file-setting">
    <p>this is html</p>
</div>
<p id="css-demo">css style</p>
<script>
    function testScriptTag(){

    }
    console.log(typeof testScriptTag);
</script>
<style>
#css-demo{
    color: red;
}
</style>

transition callback

you can use incallbackoroutcallback to define your callback function while the page forward and backward. suck like this:

[slide data-outcallback="outcallback" data-incallback="incallback"]
## when get into this page, call incallback function
## when left this page, call outcallback function

table example

### css preprocessor：less\sass\stylus
---
|less| sass | stylus
:-------|:------:|-------:|--------
environment |js/nodejs | Ruby | nodejs
.ext | .less | .sass/.scss | .styl

insert iframe

use data-src as the url of the iframe, the iframe will not load the content untill the page be displayed.

<iframe data-src="http://www.baidu.com" src="about:blank;"></iframe>

example

for more go to ppts/demo.md

To see more demo, check the ppts folder

help

nodeppt -h
# type -h after any command to see the help.
nodeppt start -h

how to run the demo?

Thanks