网页展示工具-Nodeppt

nodejs

Nodeppt是一款能将 Markdown 文档转成网页版 PPT 的开源工具，支持图表、流程图、数学符号、自定义主题配色以及样式等。基于Node.js编写。遵守MIT开源协议。

主要功能特色：

    基于GFM（Github Flavored Markdown）的markdown语法编写
    支持html混排
    导出网页或者pdf，方便分享
    支持18+种转场动画，可以设置单页动画
    支持单页背景图片
    多种模式：overview模式，双屏模式，socket远程控制，摇一摇换页等
    可以使用画板，可以使用note做备注
    支持语法高亮，自由选择highlight样式
    可以单页ppt内部动画，单步动画
    支持进入/退出回调，方便在线demo

[repo owner=”ksky521″ name=”nodeppt

---------------------------------------------------

This is probably the best web presentation tool so far!

nodeppt.js.org

nodeppt 2.0

累死累活干不过做 PPT 的！
> 查看效果：https://nodeppt.js.org

nodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构，新效果

Install

npm install -g nodeppt

Usage

简化了，就三个命令：

  • 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 既可以打开演讲者模式，双屏同步.

公共资源：public 文件夹

如果项目文件夹下，存在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

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'
    }]
}

详见site/echarts.md

mermaid

mermaid 主题配色可以直接在yaml配置的 js 中引入。mermaid 采用fence语法，如下：

 
详见site/mermaid.md

ketex

参考：markdown-it-katex语法

<slide> 语法

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/background.md和在线演示

样式

样式太多，具体详见site/classes.md和在线演示

from 

https://github.com/ksky521/nodeppt