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

实用的ppt网页,第一免费ppt模板网站

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文件分成两部分，第一部分是写在最前面的配置，然后是使用<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语法，如下：

实用的ppt网页,第一免费ppt模板网站

<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

很实用的ppt网站 (第一免费ppt模板网站)

安装

用法

帮助

键盘快捷键

公共资源：public 文件夹

编辑

动效

高级玩法