nodeppt 2.0基于webslides、webpackdown-it、posthtmlmarkdown重构。
安装npm install -g nodeppt用法new：利用线上模板创建一个新的 md 文件serve：启动一个 md 文件的 webpack dev serverbuild：构建一个 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 既可以打开演讲者模式，双屏同步
键盘快捷键页面：↑/↓/←/→ 空间首页端全屏：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/nodepptjs: - https://www.echartsjs.com/asset/theme/shine.jsprismTheme: solarizedlightplugins: - echarts - mermaid - katexjs：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 版本支持动效紧张是页面内的动效。
支持动效包括：
fadeInzoomInrollInmoveInfadeInUpslow在须要支持的动效父节点添加.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
开源地址：https://github.com/ksky521/nodeppt
