This is probably the best web demo library nodeppt so far.

nodeppt 2.0 Rebuilds based on webslides, webpackdown-it, and posthtmlmarkdown.

Installation

npm install -g  nodeppt

Usage

• new: Create a new md file using the online template
• serve: start a webpack dev server for md file
• build: build a md file

# 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

# help nodeppt -h
# Get help 
nodeppt serve -h

nodeppt has a speaker mode, add after the page url? mode=speaker You can turn on the speaker mode and synchronize the two screens

Keyboard shortcuts

• Page: ↑/↓/←/→ Space home page
• Full screen: F
• Overview: -/+
• Speaker’s note: N
• Grid background: Enter

public resources: public folder

If there is a public folder in the project folder, it can be accessed directly from the url, the contentBase option of the webpack dev server.

At build, the files in the public folder will be fully copied to the dist folder

Edit

The best experience is Chrome, which is meant for presentations, so consider non-Chrome connection issues

Here’s how to write it.

< Basic syntax

The entire markdown file is divided into two parts, the first part is written in the first configuration, and then the use of < slide> Separate the content of each slide.

nodeppt configuration is written directly at the top of the md file using yaml syntax, such as the following configuration:

title: nodeppt markdown presentation
speaker: Sanshui Kiyoshi
url: https://github.com/ksky521/nodeppt
js:
    - https://www.echartsjs.com/asset/theme/shine.js
prismTheme: solarizedlight
plugins:
    - echarts
    - mermaid
    - katex

• js: js file classification, put before the main text
• css: css file, resulting in
• prism subject: prism color matching, value range [‘dark’, ‘coy’, ‘funky’, ‘okaidia’, ‘tomorrow’, ‘solarizedlight’, ‘twilight’]
• plugins: Currently supported plugins echarts, mermaid and katex

plug-in

nodeppt chart plugin, support for KaTeX graphic symbols, now three.

< Chart

echarts theme color matching can be introduced directly in yaml configured js. echarts uses the fence syntax as follows:

{
    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 theme color matching can be introduced directly in yaml configured js. mermaid uses fence syntax as follows:

< slide> Syntax

nodeppt will run according to < slide> Decompose the entire markdown file into a single page of slide content. < slide> Tags Support the following tags:

• class/style, etc. : Normal class, through which we can control aligncenter, content position, background color, etc.
• image: background image, basic syntax image=”img_url”
• video: background video, basic syntax video=”video_src1,video_src2″
• :class: wrap class, the following details

The slide resolves into the following html structure:

< section class="slide" attrs... > < div class="wrap" wrap="true"> // What exactly markdown renders < /div> < /section> 

where < slide> The class, etc., is resolved to the above < section> Tag, and :class is resolved to div.wrap, for example:

< slide :class="size-50" class="bg-primary"> < /slide> 

The output is

< section class="slide bg-primary"> < div class="wrap size-50" wrap="true"> // What exactly markdown renders < /div> < /section> 

Action

nodeppt supports dynamic effects as always, and version 2.0 supports dynamic effects mainly in the page.

Support for dynamic effects include:

• fadeIn
• zoomIn
• rollIn
• moveIn
• fadeInUp
• slow

Add.build to the parent node of the action action to be supported or add.tobuild+ action class to a specific element.

nodeppt also supports animate.css by convention.

Advanced gameplay

nodeppt.config.js

Create nodeppt.config.js file in the nodeppt execution path, you can configure the options related to webpack, in addition, you can support the self-developed nodeppt plug-in.

The default config.js built-in content is as follows:

/**
* @file  Default configuration 
 */
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',
    // Plug-ins, including  markdown  and  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 => {}
    */
    }
}); 

Parser plug-in
Parsing plugins fall into two categories: markdown-it and posthtml

• markdown-it: parses markdown files, if it is to enhance markdown syntax, you can use this type of plug-in
• posthtml: is to deal with html tags, if it is to modify the output html content, you can use this kind of plug-in

Define a plugin:

module.exports = {
   // The id here must start with markdown/posthtml 
   // Corresponding to markdown-it and posthtml plugin syntax respectively 
   id: 'markdown-xxx',
   // apply here is the actual content of the plugin, see markdown-it and posthtml plugin development in detail 
   apply: () =>  {}
}; 

—END—

Open Source protocol: MIT license