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 nodepptUsage
- 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.mdHelp
# help nodeppt -h
# Get help
nodeppt serve -hnodeppt 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
