本期推荐的这可能是迄今为止最好的网页版演示库nodeppt。
nodeppt 2.0基于webslides、webpackdown-it、posthtmlmarkdown重构。
安装
npm install -g nodeppt用法
- 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 -hnodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步
键盘快捷键
- 页面：↑/↓/←/→ 空间首页端
- 全屏：F
- 概述：-/+
- 演讲者注：N
- 网格背景：输入
公共资源：public 文件夹
如果项目文件夹下，存在public文件夹，可以直接通过url访问，webpack dev server的contentBase选项。
在build那个时候，公共文件夹中的文件会完整复制到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- js：js 文件分类，放在正文之前
- css：css 文件，造成结果
- prism主题：棱镜配色，取值范围[‘dark’, ‘coy’, ‘funky’, ‘okaidia’, ‘tomorrow’, ‘solarizedlight’, ‘twilight’]
- plugins：当前支持插件echarts，mermaid和katex三个
插件
nodeppt 图表插件，支持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语法，如下：
<slide>语法
nodeppt会根据<slide>对整个markdown文件进行分解，拆成单页的幻灯片内容。<slide>标签支持下面的标签：
- class/style 等：正常的类，可以通过这个控制居中（aligncenter），内容位置，背景色等
- 图片：背景图片，基本语法image=”img_url”
- 视频：背景视频，基本语法video=”video_src1,video_src2″
- :class：wrap 的类，下面详解
幻灯片会解析成下面的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>输出为：
<section class="slide bg-primary"><div class="wrap size-50" wrap="true">// 具体 markdown 渲染的内容</div></section>动效
nodeppt 一如既往的支持动效，2.0 版本支持动效主要是页面内的动效。
支持动效包括：
- fadeIn
- zoomIn
- rollIn
- moveIn
- fadeInUp
- slow
在需要支持的动效父节点添加.build或者在具体的某个元素上添加.tobuild+动效 class即可。
按照惯例，nodeppt 还支持animate.css的动效哦~
高级玩法
nodeppt.config.js
在 nodeppt 执行路径下创建nodeppt.config.js文件，可以配置跟webpack相关的选项，另外可以支持自研 nodeppt 插件。
默认内置的config.js内容如下：
/**
* @file 默认配置
*/
module.exports = () => ({
// project deployment base
baseUrl: '/',
// where to output built files
outputDir: 'dist',
// where to put static assets (js/css/img/font/...)
assetsDir: '',
// filename for index.html (relative to outputDir)
indexPath: 'index.html',
// 插件，包括 markdown 和 posthtml
plugins: [],
// chainWebpack: [],
// whether filename will contain hash part
filenameHashing: true,
// boolean, use full build?
runtimeCompiler: false,
// deps to transpile
transpileDependencies: [
/* 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 cores
parallel: () => {
try {
return require('os').cpus().length > 1;
} catch (e) {
return false;
}
},
// multi-page config
pages: undefined,
// <script type="module" crossorigin="use-credentials">
// #1656, #1867, #2025
crossorigin: undefined,
// subresource integrity
integrity: 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: () => {}
};—END—
开源协议：MIT license
