I can't do the PPT after working hard!
> View effect: https://nodeppt.js.org

nodeppt 2.0 be based on webslides , webpack, markdown it, posttml reconstruction, New effects

 npm install -g nodeppt

• bug fix
• Add multi page editing public resources, which is split Chunks

Simplified, there are three commands:

• New: Create a new md file using the online template
• Serve: Start the webpack dev server of an md file
• Build: compile and produce an 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.md

 # help nodeppt -h # get help nodeppt serve -h

Nodeppt has speaker mode, which is added after the page url ? mode=speaker Both speaker mode and dual screen synchronization can be turned on

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

If there is public Folder, which can be accessed directly through the url. Refer to webpack dev server Of contentBase Option.

stay build The files in the public folder will be completely copied to dist Folder

The best experience is Chrome browser, which is originally used for demonstration, so don't worry about non Chrome browser compatibility!

Here's how to write it.

The whole markdown file is divided into two parts. The first part is written at the front to configure , then use <slide> Separated slide content on each page.

The configuration of nodeppt is written directly on the top of the md file, using the yaml syntax, such as the following configuration:

 title : Nodeppt markdown demo
 speaker : Three clear waters
 url : https://github.com/ksky521/nodeppt
 js : - https://www.echartsjs.com/asset/theme/shine.js
 prismTheme : solarizedlight
 plugins : - echarts - mermaid - katex

• Title: Speech topic
• Speaker: Speaker
• Url: address
• Js: js file array, placed in front of the body
• Css: css file array, put in the header
• PrismTheme: Prism color matching, value range ['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']
• Plugins: currently supported echarts ， mermaid and katex Three plug-ins

Currently, nodeppt supports Chart echarts ， Flowchart mermaid ， Mathematical Symbol KaTeX Three plug-ins.

The echarts theme color can be directly displayed in the yaml It is introduced in the configured js. Echarts adopts 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' }] }

See site/echarts.md

The mermaid theme color matching can be directly used in yaml It is introduced in the configured js. Mermaid adopts fence Syntax, as follows:

 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?

See site/mermaid.md

reference resources: markdown-it-katex grammar

Nodeppt will <slide> Split the entire markdown file into single page slide content. <slide> Labels support the following labels:

• Class/style, etc.: Normal class classes can be centered, content location, background color, etc. through this control
• Image: background image, basic syntax image="img_url"
• Video: background video, basic syntax video="video_src1,video_src2"
• : class: the class of the wrap. Details are as follows

Each slide will be parsed into the following html structure:

 < section  class =" slide " attrs... > < div  class =" wrap " wrap =" true " > //Specific rendered contents of markdown </ div > </ section >

among <slide> Of class Will be resolved to <section> On the label, and :class Is resolved to div.wrap Above, 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 " > //Specific rendered contents of markdown </ div > </ section >

<slide> Of image It will be parsed into a large background image. Common support methods are:

 < slide  image = " https://source.unsplash.com/UJbHNoVPZW0/ " > # This is a common background image < slide  image = " https://source.unsplash.com/UJbHNoVPZW0/  .dark " > # This background image will be covered with a black transparent layer < slide  image = " https://source.unsplash.com/UJbHNoVPZW0/  .light " > # This background image will be covered with a white transparent layer < slide  class = " bg-black aligncenter "  image = " https://source.unsplash.com/n9WPPWiPPJw/  .anim " > # This background image will move slowly

See site/background.md and Online Demo

There are too many styles. See details site/classes.md and Online Demo

Nodeppt is used this time webslides It supports rich layouts. There are too many. Look at the document directly site/layout.md and Online Demo

reference resources markdown-it-attrs , supported attribute , modify and add functions such as multi class support.

Including: ..class Class will be added to the upper level node, which supports {.class1.class2} This multi class syntax. Usage examples:

 # 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 >

For image, the writing method of wrapping one layer outside is supported. Specific syntax !! [] (Picture address attribute) , for example:

 ! ! [ ] ( 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 >

The button of nodeppt is similar link Syntax, supports blue, rounded, hollow and icon buttons:

 [ Normal button ] ( ) {.button} [ Rounded common button ] ( ) {.button.radius} [ hollow ] ( ) {.button.ghost} [ : fa github: icon in front ] ( ) {.button}

Icon support of Nodeppt FontAwesome Syntax:

• :fa-xxx: → <i class="fa fa-xxx"></i>
• :~fa-xxx:~ → <span><i class="fa fa-xxx"></i></span>
• ::fa-xxx:: → Block level <i class="fa fa-xxx"></i> , that is, it will not be p package

Code modified from markdown-it-span , support attr Grammar, basic usage:

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

Nodeppt, as always, supports dynamic effects. Dynamic effects supported in version 2.0 are mainly in the page.

Supporting dynamics include:

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

Add at the dynamic parent node to be supported .build Or add on a specific element . tobuild+dynamic class OK.

According to convention, nodeppt also supports animate.css The dynamic effect of~

View the file in detail: site/animation.md and Online Demo

::: The syntax is extended markdown-it-container Syntax. The default is any tag, such as

 :::div {.content-left} ## title :::

Output：

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

It also supports, tag Nesting. In addition, supported components include:

• Card: card, one side is picture, the other side is content
• Column: column multi column layout
• Shadowbox: box with shadow
• Steps: step components
• cta：
• Gallery: pictures
• Flexblock: flex block layout, which supports multiple subtypes
• Note: speech notes

The basic syntax is:

 :::TYPE {.attrs} ## Part I Separate with hr tags ---

 ## Part II The content here is also :::

Details can be seen component Some markdown files and Online Demo

Chrome browser, directly on the first page command+P/ctrl+P that will do

If above

Create under the nodeppt execution path nodeppt.config.js File, which can be configured with webpack Related options can also support self-developed nodeppt plug-ins.

Default built-in config.js The contents are 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 posttml
     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  >  one ;
         }  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 => {}
 */
     }
 } ) ;

There are two types of parsing plug-ins: markdown-it and posthtml ，

• Markdown it: it parses markdown files. If you want to enhance markdown syntax, you can use this type of plug-in
• Posthtml: it processes html tags. If you want to modify the output html content, you can use this type of plug-in

Define a plugin:

 module . exports  =  {
     //The ID here must start with markdown/posttml
     //Respectively correspond to markdown it and posttml plug-in syntax
     id : 'markdown-xxx' ,
     //The application here is the actual content of the plug-in. See markdown it and posttml plug-in development for details
     apply : ( )  =>  { }
 } ;

• markdown-it docs
• posthtml docs

The WebSlides plug-in needs to be written to a js file and then placed as an array window. WSPlugins_ And then introduce it by adding js to the configuration (yaml) of the md page.

 js: - webslide_plugins.js

 //Webslide_plugins.js content
 window . WSPlugins_  =  [
     {
         id : 'webslide_plugin_name' ,
         //The following is the corresponding plug-in class
         apply : class  Plugin  { }
     }
 ] ;

reference resources WebSlides Document

reference resources nodeppt-template-default 。

Then use nodeppt new username/repo xxx.md use

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