最合适的ppt网页 迄今为止最好的网页版PPT演示库

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的这可能是迄今为止最好的网页版演示库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 -h

nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步

• 页面：↑/↓/←/→ 空间首页端
• 全屏：F
• 概述：-/
• 演讲者注：N
• 网格背景：输入

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

开源地址：https://github.com/ksky521/nodeppt