?print=1，然后使用chrome打印 ctrl+P **为什么选择nodeppt
- 基于GFM的markdown语法编写
- 支持html混排，再复杂的demo也可以做！
- 支持多个皮肤：colors-moon-blue-dark-green-light
- 实现watch功能
nodeppt start -w - 支持20种转场动画，可以设置单页动画
- 支持单页背景图片
- 多种模式：overview模式，双屏模式，socket远程控制，摇一摇换页，使用ipad/iphone控制翻页更酷哦~
- 可以使用画板，双屏同步画板内容！可以使用note做备注
- 支持语法高亮，自由选择highlight样式
- 可以单页ppt内部动画，单步动画
- 支持进入/退出回调，做在线demo很方便
- 支持事件update函数，查看demo
- zoom.js：alt+click
demo
- http://js8.in/nodeppt/
- 多套皮肤：colors-moon-blue-dark-green-light
- 双屏控制：http://js8.in/nodeppt/?_multiscreen=1 记得允许弹窗哦~
- 三水清的分享：http://js8.in/slide
- 打印页面：http://js8.in/nodeppt/?print=1
1.4 新功能
[slide]中使用data-on-X来指定一个全局函数名事件说明如下
- build：当触发下一步操作的时候，会触发这个事件，具有stop方法
- keypress：在当前页面按键触发，具有stop方法
- enter/leave：进入/离开 此页面触发的事件，无stop方法
stop()方法；slide退场后事件解绑.This is probably the best web presentation tool so far!
nodeppt.js.orgnodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构，新效果
npm install -g nodeppt
- bug fix
- 增加多页编辑公共资源，说人话就是 splitChunks
简化了，就三个命令：
- new：使用线上模板创建一个新的 md 文件
- serve：启动一个 md 文件的 webpack dev server
- build：编译产出一个 md 文件
# create a new slide with an official template
$ nodeppt new slide.md
# create a new slide straight from a github template
$ nodeppt new slide.md -t username/repo
# start local sever show slide
$ nodeppt serve slide.md
# to build a slide
$ nodeppt build slide.md# help nodeppt -h # 获取帮助 nodeppt serve -h
nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步
- Page: ↑/↓/←/→ Space Home End
- Fullscreen: F
- Overview: -/+
- Speaker Note: N
- Grid Background: Enter
如果项目文件夹下，存在public文件夹，可以直接通过 url 访问，参考webpack dev server的 contentBase 选项。
在build的时候，public 文件夹中的文件会完全 copy 到dist文件夹中
最佳体验是 chrome 浏览器，本来就是给做演示用的，所以就别考虑非 Chrome 浏览器兼容问题了！
这里说下怎么编写。
整个 markdown 文件分为两部分，第一部分是写在最前面的配置，然后是使用<slide>隔开的每页幻灯片内容。
nodeppt 的配置是直接写在 md 文件顶部的，采用 yaml 语法，例如下面配置：
title: nodeppt markdown 演示
speaker: 三水清
url: https://github.com/ksky521/nodeppt
js:
- https://www.echartsjs.com/asset/theme/shine.js
prismTheme: solarizedlight
plugins:
- echarts
- mermaid
- katex- title: 演讲主题
- speaker：演讲者
- url：地址
- js：js 文件数组，放到 body 之前
- css：css 文件数组，放到头部
- prismTheme：prism 配色，取值范围
['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight'] - plugins：目前支持 echarts，mermaid和 katex 三个插件
目前 nodeppt 支持 图表 echarts，流程图 mermaid，数学符号 KaTeX 三个插件。
echarts 主题配色可以直接在yaml配置的 js 中引入。echarts 采用fence语法，如下：
{
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
mermaid 主题配色可以直接在yaml配置的 js 中引入。mermaid 采用fence语法，如下：
参考：markdown-it-katex语法
nodeppt 会根据<slide>对整个 markdown 文件进行拆分，拆成单页的幻灯片内容。<slide> 标签支持下面标签：
- class/style 等：正常的 class 类，可以通过这个控制居中（aligncenter），内容位置，背景色等
- image：背景图片，基本语法
image="img_url" - video：背景视频，基本语法
video="video_src1,video_src2" - :class：wrap 的 class，下面详解
每个 slide 会解析成下面的 html 结构：
<section class="slide" attrs...><div class="wrap" wrap="true">// 具体 markdown 渲染的内容</div></section>其中<slide> 的class等会被解析到 <section>标签上面，而:class则被解析到div.wrap上面，例如：
<slide :class="size-50" class="bg-primary"></slide>output 为：
<section class="slide bg-primary"><div class="wrap size-50" wrap="true">// 具体 markdown 渲染的内容</div></section><slide>的image 会被解析成背景大图，常见的支持方式有：
<slide image="https://source.unsplash.com/UJbHNoVPZW0/">
# 这是一个普通的背景图
<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .dark">
# 这张背景图会在图片上面蒙一层偏黑色的透明层
<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .light">
# 这张背景图会在图片上面蒙一层偏白色的透明层
<slide class="bg-black aligncenter" image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">
# 这张背景图会缓慢动样式太多，具体详见site/classes.md和在线演示
nodeppt 这次使用webslides的布局，支持丰富的布局，实在太多了，直接看文档site/layout.md和在线演示
from https://github.com/ksky521/nodeppt
No comments:
Post a Comment