幻灯制作工具

nodeppt

Demo预览

安装

npm install -g nodeppt //安装nodeppt
nodeppt start -p 8090 //从8090端口打开运行,查看默认demo.md
nodeppt create <演示> //默认创建“演示.md”,指定.html可创建“演示.html”

基本配置

title: //这是演讲的题目
speaker: //演讲者名字
url: //可以设置链接
transition: //转场效果,例如:zoomin
files: //引入js和css的地址,如果有的话~自动放在页面底部
//这里如果配置了zoom.js,支持alt+点击处放大显示

分页 ——[slide]

[slide]
##这里是第一页,支持html,markdown混编
---
<p class="css-demo">具体看下项目中 ppts/demo.md 代码</p>
<script>...</script>
<style>#css-demo{color: red;}</style>

[slide style="background-image:url('/img/bg1.png')" data-transition="vertical3d"]
<p>这里是第二页,可以单独设置背景,动画</p>

[note] //支持noto标签 配置多窗口,可记录笔记等  键盘按键“n”调出多窗口
这里是note
[/note]

动画 (逐条动画,3d切换动画)

moveIn fadeIn bounceIn rollIn zoomIn

{:&.moveIn} //设置逐条动画
{:&.flexbox:vleft} //居左

键盘按键

w  //宽屏显示
h  //斜体与粗体设置文字会晃动显示
p  //开启画笔  大键盘数字键1234: 设置粗细;  【B/Y/R/G/M】:更换颜色
c  //退出画笔
n  //如果设置了 [/note] 标签对,则显示其内容
o  //预览模式

其它

导出 pdf | html

// 安装phantomjs,如果安装了,请忽略
npm install -g phantomjs
// 启动nodeppt server
nodeppt start
// 导出pdf文件
nodeppt pdf http://127.0.0.1:8080/md/demo.md -o a.pdf
// 使用generate命令
nodeppt generate filepath
// 导出全部,包括nodeppt的js、img和css文件夹
// 默认导出在publish文件夹
nodeppt generate ./ppts/demo.md -a
// 指定导出文件夹 导出html
nodeppt generate ./ppts/demo.md -a -o output/path

多套皮肤可选

colors-moon-blue-dark-green-light

手机远程控制

localhost/md/demo.md?controller=socket //方法一:使用url带参数
nodeppt start -c socket //方法二:使用start命令行

然后在打开的页面按键【Q】,扫描弹出的二维码就可以用手机来控制

多窗口控制

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

remark

另一款markdown制作幻灯片利器

用法如下:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
  @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
  @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
  @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }</style>
</head>
<body>
<textarea id="source">

class: center, middle

qiansr 首页

---

# git 的使用 第二页
## By qiansr

---

##Git:一个先进的分布式版本控制系统。 第三页

---

## 集中式 vs 分布式 

---

</textarea>
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
<script>
      var slideshow = remark.create();
</script>
</body>
</html>

impress.js

© QIANSR all right reserved,powered by Gitbook该文件修订时间: 2015-11-30 14:39:41