nodeppt 2.0

PPT
> https://nodeppt.js.org

nodeppt 2.0 webslideswebpackmarkdown-itposthtml

Install

npm install -g nodeppt

TODO

• bug fix
• splitChunks

Usage

• 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

Keyboard Shortcuts

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

public

public url webpack dev server contentBase

buildpublic 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
• jsjs body
• csscss
• prismThemeprism ['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']
• plugins echartsmermaid katex

nodeppt echarts mermaid KaTeX

echarts

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

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

ketex

markdown-it-katex

<slide>

nodeppt <slide> markdown <slide>

• class/style class aligncenter
• image image="img_url"
• video video="video_src1,video_src2"
• :classwrap 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 webslidessite/layout.md

attribute

markdown-it-attrsattribute 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

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>

button

nodeppt button link icon button

[](){.button} [](){.button.radius}

[](){.button.ghost} [:fa-github:  icon](){.button}

IconFontAwesome

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

span

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
• columncolumn
• shadowbox
• steps
• cta
• gallery
• flexblockflex block
• note:

:::TYPE {.attrs}

## 

 hr 

---

## 



:::

component markdown

pdf

chrome command+P/ctrl+P

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 => {}
    */
    }
});

parser plugin

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 plugin

WebSlides js window.WSPlugins_ md yaml js

js: - webslide_plugins.js

// webslide_plugins.js
window.WSPlugins_ = [
    {
        id: 'webslide_plugin_name',
        // 
        apply: class Plugin {}
    }
];

WebSlides

Template

nodeppt-template-default

nodeppt new username/repo xxx.md

Thanks

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