累るい死し累るい活かつ干ひ不ふ过做 PPT 的てき！
> 查看效果こうか：https://nodeppt.js.org

nodeppt 2.0 基もと于webslides、webpack、markdown-it、posthtml 重じゅう构，新しん效果こうか

npm install -g nodeppt

• bug fix
• 增加ぞうか多た页编辑公共こうきょう资源，说人话就是ぜ splitChunks

简化了りょう，就三さん个命令れい：

• 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 既すんで可か以打开演讲者模も式しき，双そう屏へい同どう步ふ

• Page: ↑/↓/←/→ Space Home End
• Fullscreen: F
• Overview: -/+
• Speaker Note: N
• Grid Background: Enter

如果项目文ぶん件けん夹下，存在そんざいpublic文ぶん件けん夹，可か以直接ちょくせつ通どおり过 url 访问，参考さんこうwebpack dev server的てき contentBase 选项。

在ざいbuild的てき时候，public 文ぶん件けん夹中的てき文ぶん件けん会かい完全かんぜん copy 到いた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

• title: 演えんじ讲主题
• speaker：演えんじ讲者
• url：地ち址し
• js：js 文ぶん件数けんすう组，放ひ到いた body 之の前まえ
• css：css 文ぶん件数けんすう组，放ひ到いた头部
• prismTheme：prism 配色はいしょく，取と值范围 ['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']
• plugins：目前もくぜん支持しじ echarts，mermaid和わ katex 三さん个插件けん

目前もくぜん nodeppt 支持しじ 图表 echarts，流りゅう程ほど图 mermaid，数学すうがく符号ふごう 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'
    }]
}

详见site/echarts.md

mermaid 主しゅ题配色しょく可か以直接ちょくせつ在ざいyaml配置はいち的てき js 中ちゅう引入。mermaid 采さい用ようfence语法，如下：

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

详见site/mermaid.md

参考さんこう：markdown-it-katex语法

nodeppt 会かい根ね据すえ<slide>对整个 markdown 文ぶん件けん进行拆分，拆成单页的てき幻灯げんとう片へん内容ないよう。<slide> 标签支持しじ下面かめん标签：

• class/style 等とう：正常せいじょう的てき class 类，可か以通过这个控制せい居中きょちゅう（aligncenter），内容ないよう位置いち，背景はいけい色しょく等とう
• image：背景はいけい图片，基本きほん语法 image="img_url"
• video：背景はいけい视频，基本きほん语法 video="video_src1,video_src2"
• :class：wrap 的てき class，下面かめん详解

每まい个 slide 会かい解析かいせき成なり下面かめん的てき 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>

output 为：

<section class="slide bg-primary"><div class="wrap size-50" wrap="true">// 具体ぐたい markdown 渲染的てき内容ないよう</div></section>

<slide>的てきimage 会かい被ひ解析かいせき成なり背景はいけい大だい图，常つね见的支持しじ方式ほうしき有ゆう：

<slide image="https://source.unsplash.com/UJbHNoVPZW0/">

# 这是一个普通的背景图

<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .dark">

# 这张背景はいけい图会在ざい图片上面うわつら蒙こうむ一层偏黑色的透明层

<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .light">

# 这张背景はいけい图会在ざい图片上面うわつら蒙こうむ一层偏白色的透明层

<slide class="bg-black aligncenter" image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">

# 这张背景はいけい图会缓慢动

详见site/background.md和わ在ざい线演示しめせ

样式太ふと多おお，具体ぐたい详见site/classes.md和わ在ざい线演示しめせ

nodeppt 这次使用しようwebslides的てき布ぬの局きょく，支持しじ丰富的てき布ぬの局きょく，实在太ふと多た了りょう，直接ちょくせつ看み文ぶん档site/layout.md和わ在ざい线演示しめせ

参考さんこうmarkdown-it-attrs，支持しじ了りょうattribute，修おさむ改あらため增加ぞうか多た class 支持しじ等とう功こう能のう。

其中：..class会かい往上一いち级节点てん添加てんか class，支持しじ{.class1.class2}这种多た class 的てき语法。用法ようほう举例：

# header {.style-me.class2}

paragraph {data-toggle=modal}

Output:

<h1 class="style-me class2">header</h1>
<p data-toggle="modal">paragraph</p>

Use the css-module green on this paragraph. {.text-intro}

Output:

<p class="text-intro">Use the css-module green on this paragraph.</p>

-   list item **bold** {.red}

Output:

<ul>
    <li class="red">list item <strong>bold</strong></li>
</ul>

-   list item **bold**
    {.red}

Output:

<ul class="red">
    <li>list item <strong>bold</strong></li>
</ul>

对于 image ，支持しじ外面がいめん包つつみ裹一层的写うつし法ほう，具体ぐたい语法 !![](图片地ち址し 属性ぞくせい)，例れい如：

!![](https://webslides.tv/static/images/iphone.png .size-50.alignleft)

Output：

<img src="https://webslides.tv/static/images/iphone.png" class="size-50 alignleft" />

!![figure](https://webslides.tv/static/images/setup.png .aligncenter)

Output:

<figure><img src="https://webslides.tv/static/images/setup.png" class="aligncenter" /></figure>

nodeppt 的てき button 是ぜ类似link语法的てき，支持しじ蓝色、圆角、空そら心こころ和かず icon 版本はんぽん的てき button：

[普通ふつう按钮](){.button} [圆角普通ふつう按钮](){.button.radius}

[空そら心こころ](){.button.ghost} [:fa-github: 前面ぜんめん带 icon](){.button}

nodeppt 的てき icon 支持しじ FontAwesome 语法：

• :fa-xxx: → <i class="fa fa-xxx"></i>
• :~fa-xxx:~ → <span><i class="fa fa-xxx"></i></span>
• ::fa-xxx:: → 块级<i class="fa fa-xxx"></i>，即そく不ふ会かい被ひp包つつみ裹

代だい码修改あらため自じmarkdown-it-span，支持しじ attr语法，基本きほん用法ようほう：

:span:
:span: {.text-span}

nodeppt 一如既往的支持动效，2.0 版本はんぽん支持しじ动效主要しゅよう是ぜ页面内ない的てき动效。

支持しじ动效包括ほうかつ：

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

在ざい需要じゅよう支持しじ的てき动效父ちち节点添加てんか.build或ある者もの在ざい具体ぐたい的てき某ぼう个元素げんそ上じょう添加てんか.tobuild+动效 class即そく可か。

按照惯例，nodeppt 还支持しじanimate.css的てき动效哦~

详细查看文ぶん件けん：site/animation.md和わ在ざい线演示しめせ

:::语法是ぜ扩展了りょう markdown-it-container 语法，默だま认是任意にんい tag，例れい如

:::div {.content-left}

## title

:::

Output：

<div class="content-left"><h2>title</h2></div>

还支持しじ，tag 嵌はま套，除じょ此之外がい，支持しじ的てき组件包括ほうかつ：

• card：卡片，一いち边是图片，一いち边是内容ないよう
• column：column 多た栏布局きょく
• shadowbox：带阴影かげ的てき盒子
• steps：步ふ骤组件けん
• cta：
• gallery：图片
• flexblock：flex block 布ぬの局きょく，支持しじ多た个子类型
• note: 演えんじ讲注释

基本きほん语法是ぜ：

:::TYPE {.attrs}

## 第だい一いち部分ぶぶん

使用しよう hr 标签隔开

---

## 第だい二に部分ぶぶん

这里的てき内容ないよう也是哦

:::

详细可か以看 component 部分ぶぶん的てき markdown 文ぶん件けん和わ在ざい线演示しめせ

chrome 浏览器き，直接ちょくせつ在ざい第だい一いち页 command+P/ctrl+P 即そく可か

如果上面うわつら

在ざい 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: () => {}
};

• markdown-it docs
• posthtml docs

WebSlides 插件需要じゅよう写うつし到いた一いち个 js 文ぶん件けん中ちゅう，然しか后きさき作さく为数组放到いたwindow.WSPlugins_中なか，然しか后きさき通どおり过在 md 页面的てき配置はいち（yaml）添加てんか js 的てき方法ほうほう引入。

js: - webslide_plugins.js

// webslide_plugins.js内容ないよう
window.WSPlugins_ = [
    {
        id: 'webslide_plugin_name',
        // 下面かめん是ぜ对应的てき插件类
        apply: class Plugin {}
    }
];

参考さんこうWebSlides 文ぶん档

参考さんこうnodeppt-template-default。

然しか后きさき使用しようnodeppt new username/repo xxx.md使用しよう

• WebSlides
• markdown-it
• posthtml
• webpack
• vue-cli