《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的這可能是迄今為止最好的網頁版演示庫nodeppt。nodeppt 2.0基於webslides、webpackdown-it、posthtmlmarkdown重構。安裝npm install -g nodeppt用法new：使用線上模板創建一個新的 md 文件serve：啟動一個 md 文件的 webpack dev serverbuild：構建一個 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 -hnodeppt 有演講者模式，在頁面 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
– katexjs：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 版本支持動效主要是頁面內的動效。支持動效包括：fadeInzoomInrollInmoveInfadeInUpslow在需要支持的動效父節點添加.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 和 posthtmlmarkdown-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