nodePPT 网络幻灯片

本文介绍node.js编写的网络幻灯片使用方法。

简介

Nodeppt是一款能将 Markdown 文档转成网页版 PPT 的开源工具，支持图表、流程图、数学符号、自定义主题配色以及样式等。基于 Node.js 编写。遵守MIT开源协议。当前最新版本 2.2.2。

官网 github： https://github.com/ksky521/nodeppt
官方 demo 地址： https://nodeppt.js.org/#slide=1
本地链接

功能特色

基于GFM (Github Flavored Markdown) 的markdown语法编写
支持html混排，再复杂的demo也可以做！
导出网页或者pdf更容易分享
支持18种转场动画，可以设置单页动画
支持单页背景图片
多种模式：overview模式，双屏模式，socket远程控制，摇一摇换页，使用ipad控制做分享更酷哦~
可以使用画板，可以使用note做备注
支持语法高亮，自由选择highlight样式
可以单页ppt内部动画，单步动画
支持进入/退出回调，做在线demo很方便

安装

代码语言：javascript复制

npm install -g nodeppt

使用

启动

代码语言：javascript复制

# 获取帮助 
nodeppt start -h 

# 绑定端口 
nodeppt start -p <port>
nodeppt start -p 8090 -d path/for/ppts 
# 绑定host，默认绑定0.0.0.0 
nodeppt start -p 8080 -d path/for/ppts -h 127.0.0.1 
# 使用socket通信（按Q键显示/关闭二维码，手机扫描，即可控制） 
# socket须知：1、注意手机和pc要可以相互访问，2、防火墙，3、ip 
nodeppt start -c socket 
# 不加-c默认使用postMessage，窗口联动，即list页面【多窗口】链接

启用socket控制

方法一：使用`start`命令行

代码语言：javascript复制

nodeppt start -c socket

在页面按键【Q】显示控制url的二维码和控制链接（需要隐身窗口打开），手机上可以使用左右touch滑动和摇一摇切换下一页

方法二：使用url参数

代码语言：javascript复制

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

在页面按键【Q】显示控制url的二维码和控制链接（需要隐身窗口打开），手机上可以使用左右touch滑动和摇一摇切换下一页

启用postMessage控制

默认使用postMessage多窗口控制，打开方法：

代码语言：javascript复制

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

导出ppt

导出ppt有两种，一种是pdf版，一种是html版

pdf版

需要安装phantomJS。

代码语言：javascript复制

# 安装phantomjs，如果安装了，请忽略 
npm install -g phantomjs 
# 启动nodeppt server 
nodeppt start 
# 导出文件 
nodeppt pdf http://127.0.0.1:8080/md/demo.md -o a.pdf

html版

代码语言：javascript复制

# 获取generate帮助 
nodeppt generate -h 
# 使用generate命令 
nodeppt generate filepath 
# 导出全部，包括nodeppt的js、img和css文件夹 
# 默认导出在publish文件夹 
nodeppt generate ./ppts/demo.md -a 
# 指定导出文件夹 
nodeppt generate ./ppts/demo.md -a -o output/path

导出目录下所有ppt，并且生成ppt list首页：

代码语言：javascript复制

nodeppt path -o output/path -a
#### markdown语法 nodeppt是支持**marked**语法的，但是为了制作出来更加完美的ppt，扩展了下面的语法 

#### 配置 基本配置如下： 
```markdown 
title: 这是演讲的题目 
speaker: 演讲者名字 
url: 可以设置链接 
transition: 转场效果，例如：zoomin/cards/slide 
files: 引入js和css的地址，如果有的话~自动放在页面底部

目录关系：可以在md同级目录下创建img、js、css等文件夹，然后在markdown里面引用，nodeppt默认会先查找md文件同级目录下面的静态资源，没有再找默认的assets文件夹下静态内容

转场动画

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

如果设置单页动画，请参考下面的单页动画设置部分~

分页

通过[slide]作为每页ppt的间隔，如果需要添加单页背景，使用下面的语法：

代码语言：javascript复制

[slide style="background-image:url('/img/bg1.png')"]
# 这是个有背景的家伙 
## 我是副标题

单页ppt上下布局

代码语言：javascript复制

[slide] 
## 主页面样式 
### 
----是上下分界线 
---- 
nodeppt是基于nodejs写的支持 **Markdown!** 语法的网页PPT 

nodeppt：https://github.com/ksky521/nodePPT

代码格式化

语法跟Github Flavored Markdown 一样~

单页动画设置

在md文件，顶部 配置 可以设置全局转场动画，如果要设置单页的转场动画，可以通过下面的语法

代码语言：javascript复制

[slide data-transition="vertical3d"]
## 这是一个vertical3d的动画

插入html代码

如果需要完全diy自己的ppt内容，可以直接使用 html标签，支持markdown和html混编。例如：

代码语言：javascript复制

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

转场回调

前端的ppt，难免会在页面中演示一些demo，除了上面的插入html语法外，还提供了incallback和outcallback，分别用于：切入（切走）到当前ppt，执行的js函数名。例如：

代码语言：javascript复制

[slide data-outcallback="outcallback" data-incallback="incallback"]
## 当进入此页，就执行incallback函数 
## 当离开此页面，就执行outcallback函数

表格实例

代码语言：javascript复制

### 市面上主要的css预处理器：lesssassstylus
 ---  
|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

使用data-src作为iframe的url，这样只有切换到当前页才会加载url内容~

代码语言：javascript复制

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

示例

类似下面的语法：(更多用法查看ppts/demo.md文件)

代码语言：javascript复制

title: nodeppt markdown 演示
 speaker: Theo Wang url: https://github.com/ksky521/nodePPT
 transition: zoomin [slide]
 # 封面样式
 ## h1是作为封面用的，内部的都用h2
 [slide style="background-image:url('/img/bg1.png')"]
 # 背景图片 {:&.flexbox.vleft}
 ## 使用方法：&#91;slide style="background-image:url('/img/bg1.png')"&#93;
 [slide]
 ## 主页面样式
 ###
 ----是上下分界线
 ---- 
nodeppt是基于nodejs写的支持
 **Markdown!**
 语法的网页PPT
 nodeppt：https://github.com/ksky521/nodePPT
 [slide]
 
什么？这些功能还不够用？

极客模式：查看源码的nodeppt.js，相信你会找到牛逼的手机互动（摇一摇换页）功能 

查看项目目录ppts获取更多帮助信息

更多demo，查看 ppts 目录的demo

快捷键

Page: ↑/↓/←/→ Space Home End
Fullscreen: F
Overview: -/
Speaker Note: N
Grid Background: Enter

查看帮助

代码语言：javascript复制

nodeppt -h # 任何命令都可以输入-h查看帮助 nodeppt start -h

demo演示 & 使用方法

执行 nodeppt start
访问 http://127.0.0.1:8080/
在线demo： http://qdemo.sinaapp.com/

参考资料

https://www.oschina.net/p/nodeppt?hmsr=aladdin1e1
https://www.e-learn.cn/tag/nodeppt

node.js php https 网络安全 markdown

0 人点赞

nodePPT 网络幻灯片

简介

功能特色

安装

使用

启动

启用socket控制

方法一：使用start命令行

方法二：使用url参数

启用postMessage控制

导出ppt

pdf版

html版

导出目录下所有ppt，并且生成ppt list首页：

转场动画

分页

单页ppt上下布局

代码格式化

单页动画设置

插入html代码

转场回调

表格实例

插入iframe

示例

快捷键

查看帮助

参考资料

方法一：使用`start`命令行