Nodeppt入坑

没错，又来入坑了。

昨天刚刚尝试了用reveal.js渲染Markdown的幻灯片，效果还行，但是每次都要在Html文档里面编辑，略嫌麻烦，强迫症患者的理想目标是，找到一个工具，在写好的MD文档之外，调用这个工具，即可渲染得到
PPT。而关于
PPT的风格主题、模板以及其他的，则可以在工具中指定参数。不过挺难找的，而当初也没好好的学学js，书看了不到一半就放弃了。今天就来试试这个自称最好的Nodeppt。
详细介绍见这里,gayhub的repo在这。

开始

首先安装Nodeppt
注意，需要先安装NodeJS。

npm install -g nodeppt

然而在npm的过程中，fetch等了很久，网上说可以换成淘宝的源，后来试了一下，是挺快的，然后再切换回原来的源即可。不过还是安装失败。
不过问题在于没有加sudo
然后启动

# 获取帮助
nodeppt start -h
# 绑定端口
nodeppt start -p <port>

或者：

nodeppt start -p port -d path/for/ppts

如:

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

启用socket控制有两种方式：

• 使用url参数： http://127.0.0.1:8080/md/demo.md?controller=socket
• 使用start命令行：nodeppt start -c socket
  在页面按键【Q】显示控制url的二维码和控制链接（需要隐身窗口打开），手机上可以使用左右touch滑动和摇一摇切换下一页。

最后创建Slide
可以直接用Nodeppt创建，就像hexo创建文档一样。
nodeppt create ppt-name
接下来就是按照提示输入基本信息，默认就是MD文件，如果需要Html，可以在名字后面加上后缀类型。

扩展语法

Nodeppt在支持Markdown基本语法之外，还有一些扩展。

配置

基本配置：

title: 这是演讲的题目
speaker: 演讲者名字
url: 可以设置链接
transition: 转场效果，例如：zoomin/cards/slide
files: /css/theme.moon.css，尾部的文件
theme: moon //皮肤
highlightStyle: monokai_sublime //hljs的样式
headFiles: //头部的文件
usemathjax: //如果为yes，则引入mathjax，默认不建议开启，导出文件太多
date: 2017年7月26日

另外有：colors-moon-blue-dark-green-light 共六套自带皮肤可供选择。
关于目录：可以直接在slide所在根目录添加img、css和js文件夹并添加到引用路径，Nodeppt默认可以找得到的。

排版

• 使用[slide]标签来分页，如:

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

• 使用---分界
• 单条动画

使用方法：列表第一条加上 ` {:&.动画类型}``（注意空格）
* 上下左右方向键翻页
    * 列表支持渐显动画 {:&.moveIn}
    * 支持多级列表
    * 这个动画是moveIn

目前支持的单条动画效果包括：

• moveIn
• fadeIn
• bounceIn
• rollIn
• zoomIn

• 转场动画
  Markdown的顶部配置可以设置，以方括号标注。
  magic是在一页幻灯片中播放多个子页面，页面之间进行动效切换，但是slide不翻页（类似keynote的magicmove），使用[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]

如：[slide data-transition="vertical3d"]

• 与Html语法混编
• 内部回调
  除了使用Html的语法：[code][/code]之外，提供了格外的函数：

in-callback	切换来...
out-callback 切换走...

• 表格
  与默认的Markdown语法类似。
• 在线音乐以及其他的网页插入
  使用iframe语法插入

导出文件

可以选择到处Html用于网页展示或者pdf用于保存。但根据Nodeppt官方的说法，导出pdf不再支持，请使用chrome打印服务另存为pdf，url中添加?print=1，然后使用chrome打印 ctrl+P。不过主要目的自然是用于网页展示了，pdf随时随地可以生成。
导出Html文档:

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

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

nodeppt path output/path -a

Demo演示

执行 nodeppt start
访问 http://127.0.0.1:8080/
在线demo： http://js8.in/nodeppt/

好了，写了这么多，终于要点题了。
在我尝试安装完成之后，发现Nodeppt并没有渲染成功，或许大概是已经停止更新了吧。
渲染之后，浏览器打开是酱紫的：

入坑完毕。
不过后来又找了个Marp，直接转换倒是很方便，可以导出为
PDF，但是没有找到导出html的功能，有点遗憾。
现在就连Markdown语法都是参差不齐，因为应用不同，所以语法扩展不同，希望能尽快形成一个标准，用md渲染幻灯片的技术普及民众。
不过最后还是下了个cleaver来渲染，基本上是可以了。效果在这里。

当然，我又卸载了这个cleaver。
因为他和clear命令太像了！！！害得我都没法用补全命令clear。
Aaron早逝，但Markdown正无声的占领着这个世界。