npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nodeppt

v2.2.2

Published

A simple, in-browser, markdown-driven presentation framework

Downloads

255

Readme

nodeppt 2.0

累死累活干不过做 PPT 的! > 查看效果:https://nodeppt.js.org

Markpress npm badge

nodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构,新效果

Install

npm install -g nodeppt

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 servercontentBase 选项。

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
    - katex
  • title: 演讲主题
  • speaker:演讲者
  • url:地址
  • js:js 文件数组,放到 body 之前
  • css:css 文件数组,放到头部
  • prismTheme:prism 配色,取值范围 ['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']
  • plugins:目前支持 echartskatex 两个插件
  • pluginsOptions:插件的配置
  • webslidesOptions:webslides配置

webslidesOptions 对应的是 webslides 的配置,例如开启autoslide

webslidesOptions:
    autoslide: 5000

插件

目前 nodeppt 支持 图表 echarts流程图 mermaid数学符号 KaTeX 3 个插件。

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"
  • :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在线演示

attribute

参考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 增强

对于 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}

Icon:FontAwesome

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:卡片,一边是图片,一边是内容
  • column:column 多栏布局
  • shadowbox:带阴影的盒子
  • steps:步骤组件
  • cta:
  • gallery:图片
  • flexblock:flex block 布局,支持多个子类型

基本语法是:

:::TYPE {.attrs}

## 第一部分

使用 hr 标签隔开

---

## 第二部分

这里的内容也是哦

:::

详细可以看 component 部分的 markdown 文件和在线演示

打印?导出 pdf?

在 chrome 浏览器,在 URL 添加URL?print-pdf,然后直接 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-itposthtml

  • 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