Awesome Open Source
Awesome Open Source

nodeppt 2.0

PPT
> https://nodeppt.js.org

Markpress npm badge

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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Html5 (12,376
Webpack (9,583
Css3 (8,144
Markdown (6,621
Animation (5,106
Javascript Library (1,852
Slides (1,195
Presentation (1,125
Slideshow (406
Ppt (142
Related Projects