- Notifications
You must be signed in to change notification settings - Fork2.1k
This is probably the best web presentation tool so far!
License
ksky521/nodeppt
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
累死累活干不过做 PPT 的！
>查看效果：https://nodeppt.js.org
nodeppt 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
# helpnodeppt -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/nodepptjs: -https://www.echartsjs.com/asset/theme/shine.jsprismTheme:solarizedlightplugins: -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语法，如下：
sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?参考：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 结构：
<sectionclass="slide"attrs...><divclass="wrap"wrap="true">// 具体 markdown 渲染的内容</div></section>
其中<slide> 的class等会被解析到<section>标签上面，而:class则被解析到div.wrap上面，例如：
<slide:class="size-50"class="bg-primary"></slide>
output 为：
<sectionclass="slide bg-primary"><divclass="wrap size-50"wrap="true">// 具体 markdown 渲染的内容</div></section>
<slide>的image 会被解析成背景大图，常见的支持方式有：
<slideimage="https://source.unsplash.com/UJbHNoVPZW0/">#这是一个普通的背景图<slideimage="https://source.unsplash.com/UJbHNoVPZW0/ .dark">#这张背景图会在图片上面蒙一层偏黑色的透明层<slideimage="https://source.unsplash.com/UJbHNoVPZW0/ .light">#这张背景图会在图片上面蒙一层偏白色的透明层<slideclass="bg-black aligncenter"image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">#这张背景图会缓慢动
样式太多，具体详见site/classes.md和在线演示
nodeppt 这次使用webslides的布局，支持丰富的布局，实在太多了，直接看文档site/layout.md和在线演示
参考markdown-it-attrs，支持了attribute，修改增加多 class 支持等功能。
其中：..class会往上一级节点添加 class，支持{.class1.class2}这种多 class 的语法。用法举例：
#header {.style-me.class2}paragraph {data-toggle=modal}Output:
<h1class="style-me class2">header</h1><pdata-toggle="modal">paragraph</p>
Use the css-module green on this paragraph. {.text-intro}Output:
<pclass="text-intro">Use the css-module green on this paragraph.</p>
- list item**bold** {.red}
Output:
<ul><liclass="red">list item<strong>bold</strong></li></ul>
- list item**bold** {.red}
Output:
<ulclass="red"><li>list item<strong>bold</strong></li></ul>
对于 image ，支持外面包裹一层的写法，具体语法!，例如：
!
Output：
<imgsrc="https://webslides.tv/static/images/iphone.png"class="size-50 alignleft"/>
!
Output:
<figure><imgsrc="https://webslides.tv/static/images/setup.png"class="aligncenter"/></figure>
nodeppt 的 button 是类似link语法的，支持蓝色、圆角、空心和 icon 版本的 button：
[普通按钮](){.button}[圆角普通按钮](){.button.radius}[空心](){.button.ghost}[:fa-github: 前面带 icon](){.button}
nodeppt 的 icon 支持FontAwesome语法：
:fa-xxx:→<i></i>:~fa-xxx:~→<span><i></i></span>::fa-xxx::→ 块级<i></i>，即不会被p包裹
代码修改自markdown-it-span，支持attr语法，基本用法：
:span::span: {.text-span}nodeppt 一如既往的支持动效，2.0 版本支持动效主要是页面内的动效。
支持动效包括：
- fadeIn
- zoomIn
- rollIn
- moveIn
- fadeInUp
- slow
在需要支持的动效父节点添加.build或者在具体的某个元素上添加.tobuild+动效 class即可。
按照惯例，nodeppt 还支持animate.css的动效哦~
详细查看文件：site/animation.md和在线演示
:::语法是扩展了markdown-it-container 语法，默认是任意 tag，例如
:::div {.content-left}##title:::Output：
<divclass="content-left"><h2>title</h2></div>
还支持，tag 嵌套，除此之外，支持的组件包括：
- card：卡片，一边是图片，一边是内容
- column：column 多栏布局
- shadowbox：带阴影的盒子
- steps：步骤组件
- cta：
- gallery：图片
- flexblock：flex block 布局，支持多个子类型
- note: 演讲注释
基本语法是：
:::TYPE {.attrs}##第一部分使用 hr 标签隔开---##第二部分这里的内容也是哦:::详细可以看component 部分的 markdown 文件和在线演示
chrome 浏览器，直接在第一页command+P/ctrl+P 即可
如果上面
在 nodeppt 执行路径下创建nodeppt.config.js文件，可以配置跟webpack相关的选项，另外可以支持自研 nodeppt 插件。
默认内置的config.js内容如下：
/** *@file 默认配置 */module.exports=()=>({// project deployment basebaseUrl:'/',// where to output built filesoutputDir:'dist',// where to put static assets (js/css/img/font/...)assetsDir:'',// filename for index.html (relative to outputDir)indexPath:'index.html',// 插件，包括 markdown 和 posthtmlplugins:[],// chainWebpack: [],// whether filename will contain hash partfilenameHashing:true,// boolean, use full build?runtimeCompiler:false,// deps to transpiletranspileDependencies:[/* string or regex */],// sourceMap for production build?productionSourceMap:true,// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 coresparallel:()=>{try{returnrequire('os').cpus().length>1;}catch(e){returnfalse;}},// multi-page configpages:undefined,// <script type="module" crossorigin="use-credentials">// #1656, #1867, #2025crossorigin:undefined,// subresource integrityintegrity:false,css:{extract:true// modules: false,// localIdentName: '[name]_[local]_[hash:base64:5]',// sourceMap: false,// loaderOptions: {}},devServer:{/* host: '0.0.0.0', port: 8080, https: false, proxy: null, // string | Object before: app => {} */}});
解析插件分两类：markdown-it 和posthtml，
- markdown-it：是解析 markdown 文件的，如果是增强 markdown 语法，可以用这类插件
- posthtml：是处理 html 标签的，如果是修改输出的 html 内容，可以用这类插件
定义一个 plugin ：
module.exports={// 这里的 id 必须以 markdown/posthtml开头// 分别对应 markdown-it和 posthtml 插件语法id:'markdown-xxx',// 这里的 apply 是插件实际的内容，详细查看 markdown-it和 posthtml 插件开发apply:()=>{}};
WebSlides 插件需要写到一个 js 文件中，然后作为数组放到window.WSPlugins_中，然后通过在 md 页面的配置（yaml）添加 js 的方法引入。
js: - webslide_plugins.js
// webslide_plugins.js内容window.WSPlugins_=[{id:'webslide_plugin_name',// 下面是对应的插件类apply:classPlugin{}}];
然后使用nodeppt new username/repo xxx.md使用
About
This is probably the best web presentation tool so far!