幻灯制作工具
nodeppt
安装
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>