《开源精选》是我们分享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 文件夹

如果项目文件夹下，存在public文件夹，可以直接通过url访问，webpack dev server的contentBase选项。

在build那个时候，公共文件夹中的文件会完整复制到dist文件夹中

编辑

最佳体验是chrome浏览器，本来就是给做演示用的，所以考虑一下非Chrome浏览器连接问题了

这里说下怎么写。

基本语法

整个markdown文件分成两部分，第一部分是写在最前面的配置，然后是使用隔开的每页幻灯片内容。

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

• 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语法，如下：

语法

nodeppt会根据对整个markdown文件进行分解，拆成单页的幻灯片内容。标签支持下面的标签：

• class/style 等：正常的类，可以通过这个控制居中（aligncenter），内容位置，背景色等
• 图片：背景图片，基本语法image="img_url"
• 视频：背景视频，基本语法video="video_src1,video_src2"
• :class：wrap 的类，下面详解

幻灯片会解析成下面的html结构：

// 具体 markdown 渲染的内容

其中的class等会则被解析到上面的

// 具体 markdown 渲染的内容

/** * @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,    //  
              
 
                

                  
  
                  支付宝打赏 
                 
                
 
                

                  
  
                  微信打赏