Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

nodePPT

This is probably the best web presentation tool so far!

Subscribe to updates I use nodePPT


Statistics on nodePPT

Number of watchers on Github 4667
Number of open issues 37
Average time to close an issue about 1 month
Main language JavaScript
Average time to merge a PR 11 days
Open pull requests 5+
Closed pull requests 3+
Last commit over 1 year ago
Repo Created about 7 years ago
Repo Last Updated over 1 year ago
Size 25.5 MB
Homepage http://js8.in/nod...
Organization / Authorksky521
Contributors15
Page Updated
Do you use nodePPT? Leave a review!
View open issues (37)
View nodePPT activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating nodePPT for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

nodeppt -

This is a readme file in English

NPM NPM

*pdfchromepdfurl?print=1chrome ctrl+P *

nodeppt


demo

  • http://js8.in/nodeppt/
  • colors-moon-blue-dark-green-light
  • http://js8.in/nodeppt/?_multiscreen=1 ~
  • http://js8.in/slide
  • http://js8.in/nodeppt/?print=1

1.4

slidebuild/enter/leave/keypress[slide]data-on-X**

  • buildstop
  • keypressstop
  • enter/leave/ stop

build/keypressslideeventeventstop()slide

1magicmove

[slide data-on-build="globalCallbackName"]
var count = 0;
function globalCallbackName(e){
    count++;
    if(count<2){
        //
        e.stop();//
    }
}

2

[slide data-on-keypress="globalCallbackName"]
function globalCallbackName(e){
    if(e.keyCode==32){
        //play();//
        e.stop();//nodeppt
    }
}

nodeppt slidedemo.md

![](/img/demo.png)

slide/img/demo.png

nodeppt generate demo.md output -a output/img/demo.png

magic

magicslidekeynotemagicmove[magic]====

[magic]

  • zoomin/zoomout
  • move
  • circle
  • earthquake
  • newspaper
  • cover-diamond
  • horizontal3d/horizontal
  • vertical3d
  • cover-circle
[slide]
[magic data-transition="earthquake"]
## 1
-----
<div class="columns3">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>
====
## 2
-----
<div class="columns3">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>

====
## 3
-----
<div class="columns3">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
    <img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>

[/magic]

theme

theme.moon

markdown

title: 
speaker: 
url: 
transition: zoomin/cards/slide
files: /css/theme.moon.css
theme: moon //
highlightStyle: monokai_sublime //hljs
headFiles: //
usemathjax: //yesmathjax
date: 20151220

colors-moon-blue-dark-green-light

theme: moon

or url?theme=moon

npm install -g nodeppt

shell

# 
nodeppt start -h
# 
nodeppt start -p <port>
nodeppt start -p 8090 -d path/for/ppts
# host0.0.0.0
nodeppt start -p 8080 -d path/for/ppts -H 127.0.0.1
# socketQ/
# socket1pc23ip

socket

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

Qurltouch

start
nodeppt start -c socket

Qurltouch

postMessage

postMessage

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

Slide.onupdate

Slide.on('update', function(i, itemIndex, cls) {
//
//* slideindex
//* itemIndexslidebuild1
//* pageup/pagedown
    Puff.add('#FFC524' /*colors[i % 6]*/ , ctx, 20, 700, width / 2, height / 2, width / 1.8, 400);
    clearInterval(timer);
    //
    if (i === 13 || i === 14) {
        timer = setInterval(function() {
            Puff.draw(1);
        }, 1E3 / FPS);
    }

})

demo13

/ppt

ppt

url?print=1chrome

html

# generate
nodeppt generate -h
# generate
nodeppt generate filepath
# nodepptjsimgcss
# publish
nodeppt generate ./ppts/demo.md -a
# 
nodeppt generate ./ppts/demo.md output/path -a

pptppt list

nodeppt path output/path -a

markdown

nodeppt*marked*ppt

title: 
speaker: 
url: 
transition: zoomin/cards/slide
files: jscss~

****mdimgjscssmarkdownnodepptmdassets

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

~


```markdown
[slide style="background-image:url('/img/bg1.png')"]
# 
## 

ppt

[slide]
## 
### ----
----
nodepptnodejs **Markdown!** PPT

nodeppthttps://github.com/ksky521/nodeppt

Github Flavored Markdown ~

{:&.}`

* 
    *  {:&.moveIn}
    * 
    * moveIn
  • moveIn
  • fadeIn
  • bounceIn
  • rollIn
  • zoomIn

md ``````

[slide data-transition="vertical3d"]
## vertical3d

html

diyppt**** htmlmarkdownhtml

<div class="file-setting">
    <p>html</p>
</div>
<p id="css-demo">css</p>
<p> ppts/demo.md </p>
<script>
    function testScriptTag(){

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

pptdemohtmlenteroutcallbackpptjs

[slide data-on-leave="outcallback" data-on-enter="incallback"]
## incallback
## outcallback
### cssless\sass\stylus
---
 |less| sass | stylus
:-------|:------:|-------:|--------
 |js/nodejs | Ruby | nodejs
 | .less | .sass/.scss | .styl
 | js |  | 
/ | [Bootstrap](http://getbootstrap.com/) | [compass](http://compass-style.org) [bourbon](http://bourbon.io) |

iframe

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

(ppts/demo.md)

title: nodeppt markdown 
speaker: Theo Wang
url: https://github.com/ksky521/nodeppt
transition: zoomin

[slide]

# 
## h1h2

[slide style="background-image:url('/img/bg1.png')"]

#  {:&.flexbox.vleft}
## &#91;slide style="background-image:url('/img/bg1.png')"&#93;

[slide]

## 
### ----
----

nodepptnodejs **Markdown!** PPT

nodeppthttps://github.com/ksky521/nodeppt

[slide]



nodeppt.js

ppts

demo ppts demo

nodeppt -h
# -h
nodeppt start -h

demo &

Thanks

  • http://tympanus.net/Development/ItemTransitions/index2.html
  • http://tympanus.net/Development/PageTransitions/
  • https://github.com/daneden/animate.css
nodePPT open issues Ask a question     (View All Issues)
  • over 2 years 请问如何添加备注
  • over 2 years ppt访问黑屏。
  • over 2 years magic灯灯片中播放多个子页面时,列表动效bug
  • over 2 years 单文件导出
  • over 2 years 如何永远处于启动状态呢~?
  • over 2 years 按键驱动多张图片依次显示
  • almost 3 years 安装失败 node版本6.2.0 npm版本3.8.9
  • almost 3 years 导出 html 时指定 lib 路径
  • almost 3 years 安装成功,启动时打不开网页
  • almost 3 years 为什么换页的速度有点慢
  • almost 3 years Mac OSX EI Capitan 安装出错!!!
  • almost 3 years 百度bae如何使用nodeppt呢
  • almost 3 years 能否实现内部超链接不在新标签页打开?
  • almost 3 years 对于图片路径的疑问
  • about 3 years $\Lambda$ 渲染不出来
  • about 3 years 建议 命令行添加下当前的状态
  • about 3 years 建议增加老师可以控制多个学生页面的功能
  • over 3 years 安装完成,运行出错
  • over 3 years nodeppt generate -a 如果生成过一次,会在publish目录下再生成publish目录,一次类推
  • over 3 years 导出 HTML 文件路径
  • over 3 years 双屏模式画笔问题
  • over 3 years npm install failed for the first time but suceed then
  • over 3 years MathJax Error: Cannot read property 'length' of undefined
  • almost 4 years Background of a slide bad rendered in HTML
  • almost 4 years Demo 第9页展示了一个布局抖动的情况
  • almost 4 years note下,开启编辑模式有问题
  • almost 4 years list的列表条目过多,如何做到类似ppt的自动压缩空间?
  • almost 4 years 如何分栏?
  • almost 4 years 如何嵌入完整的html以及在线资源文件
  • almost 4 years Show item before a code block
nodePPT open pull requests (View All Pulls)
  • mathjax 2.5.1 无法安装
  • 解决最新版本npm会将依赖扁平化,Mathjax路径失效
  • xiguan
  • fixed #148 magic多个子页面列表动效失效bug
  • 添加 main 入口 && 非公共 imgs 文件移动
nodePPT list of languages used
More projects by ksky521 View all
Other projects in JavaScript