封面样式
h1是作为封面用的，内部的都用h2测试例子
演讲者：朱阳星
样式展示
nodePPT 让每个人都爱上做分享！
为什么选择nodePPT
- 基于GFM的markdown语法编写
- 支持html混排，再复杂的demo也可以做！
- 导出网页或者pdf更容易分享
- 支持18种转场动画，可以设置单页动画
- 支持单页背景图片
- 多种模式：overview模式，双屏模式，socket远程控制，摇一摇换页
- 可以使用画板，可以使用note做备注
- 支持语法高亮，自由选择highlight样式
- 可以单页ppt内部动画，单步动画
- 支持进入/退出回调，做在线demo很方便
基本语法指南
/* 先写总的配置 */
title: 这是title，网页名称
speaker: 演讲者名称
url: https://github.com/ksky521/nodePPT
transition: 全局转场动画
files: 引入的js和css文件，多个以半角逗号隔开
hightStyle: 代码高亮样式，默认monokai_sublime
/* 以[slide] 隔开每个ppt页面 */
[slide]
## 二级标题
这里写内容即可
[slide]
...
支持单页添加背景图片
使用方法：[slide style="background-image:url('/img/bg1.png')"]
支持.class/#id/自定义属性样式
使用：.class{:.class}
使用：#id{:#id}
组合使用：{:.class.class2 width="200px"}
父元素样式使用&：{:&.class}
主页面样式
----是上下分界线
nodeppt是基于nodejs写的支持 Markdown! 语法的网页PPT
这是一个列表
- 上下左右方向键翻页
- 列表支持渐显动画
- 支持多级列表
- 这个动画是moveIn
- 完全基于markdown语法哦
这是一个数字类型列表，这是一个subslide页面
- 数字列表
- 数字列表
- 数字列表，这是一个subslide页面
列表渐显动画：fadeIn
- 列表支持渐显动画哦
- 使用方法
- markdown列表第一条加上：{:&.动画类型}
- 动画类型
- fadeIn
- rollIn
- bounceIn
- moveIn
- zoomIn
列表渐显动画：zoomIn
- 列表支持渐显动画哦
- 动画类型
- fadeIn
- rollIn
- bounceIn
- moveIn
- zoomIn
列表渐显动画：bounceIn
- 列表支持渐显动画哦
- 动画类型
- fadeIn
- rollIn
- bounceIn
- moveIn
- zoomIn
表格示例
市面上主要的css预处理器：Less\Sass\Stylus
| Less | Sass | Stylus | |
|---|---|---|---|
| 环境 | js/nodejs | Ruby(这列右对齐) | nodejs(高亮) |
| 扩展名 | .less | .scss/.sass | .styl |
| 特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众 |
| 案例/框架 | Bootstrap | Compass Bootstrap Foundation Bourbon Base.Sass |
text
.text-danger .text-sucess.text-primary
.text-warning.text-info.text-white.text-dark
.blue.blue2.blue3.gray.gray2.gray3
.red.red2.red3
.yellow.yellow2.yellow3.green.green2.green3
label and link
.label.label-primary.label.label-warning.label.label-danger.label.label-default.label.label-success.label.label-info
link style mark
blockquote
nodeppt可能是迄今为止最好用的web presentation 三水清
下面是另外一种样式
这是一个class是：pull-right的blockquote small一下
buttons
icons: Font Awesome
代码格式化
使用 highlightjs 进行语法高亮
(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
支持多种皮肤
支持 HTML 和 markdown 语法混编
这是html
这是css样式
将html代码直接混编到markdown文件中即可
我是js控制的颜色 black
iframe效果
动画样式强调
这段话里面的加粗和em字体会动画哦~
按下【H】键查看效果
支持zoom.js
增加了zoom.js的支持，在演示过程中使用alt+鼠标点击，则点击的地方就开始放大，再次alt+click则回复原装
图片，点击全屏
使用note笔记
note笔记是多窗口，或者自己做一些笔记用的
按下键盘【N】键测试下note，
markdown语法如下：
[note]
这里是note，{ 要换成中括号啊！！
{/note]
使用画笔
使用画笔做标记哦~你也可以随便作画啊！
按下键盘【P】键。按下鼠标左键，在此处乱花下看看效果。
按下键盘【C】键。清空画板
宽度不够？？
按下键盘【W】键，切换到更宽的页面看效果，第二次按键返回
| less | sass | stylus | |
|---|---|---|---|
| 环境 | js/nodejs | Ruby(这列右对齐) | nodejs(高亮) |
| 扩展名 | .less | .sass/.scss | .styl |
| 特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众 |
| 案例/框架 | Bootstrap | compass bourbon |
使用overview模式
按下键盘【O】键。看下效果。
在overview模式下，方向键下一页，【enter】键进入选中页
或者按下键盘【O】键，退出overview模式
多窗口演示
双屏演示不out！
本页面网址改成 url?_multiscreen=1，支持多屏演示哦！
跟powderpoint一样的双屏功能，带有备注信息。
20种转场动画随心换
这是一个glue的动画
使用方法（全局设置） 1：
transition: glue
这是一个glue的动画
使用方法 2：
[slide data-transition="glue"]
这是一个zoomin的动画
使用方法：
[slide data-transition="zoomin"]
这是一个vertical3d的动画
使用方法：
[slide data-transition="vertical3d"]
使用回调
- [slide data-outcallback="fnName"]
- 进入执行回调incallback函数
- [slide data-incallback="fnName"]
- 退出执行outcallback函数
亦可以组合写：
[slide data-outcallback="foo" data-incallback="bar"]
远程执行函数
在多屏和远程模式中，可以使用proxyFn来远程执行函数。
<script>
function globalFunc(){
}
</script>
<button onclick="Slide.proxyFn('globalFunc')" class="btn btn-default">远程执行函数</button>
更多玩法
https://github.com/ksky521/nodePPT
什么？这些功能还不够用？
socket远程控制可以在手机上摇一摇换页哦~
查看项目目录ppts获取更多帮助信息