{"id":13399383,"url":"https://github.com/ksky521/nodeppt","last_synced_at":"2025-02-25T17:22:25.379Z","repository":{"id":3011494,"uuid":"4030574","full_name":"ksky521/nodeppt","owner":"ksky521","description":"This is probably the best web presentation tool so far!","archived":false,"fork":false,"pushed_at":"2021-01-25T02:54:35.000Z","size":26167,"stargazers_count":10366,"open_issues_count":27,"forks_count":2068,"subscribers_count":351,"default_branch":"master","last_synced_at":"2025-02-18T16:19:14.556Z","etag":null,"topics":["animation","css3","html-presentation","html5","javascript","javascript-library","keynote","markdown","markdown-it","posthtml","ppt","presentation","slides","slideshow","webpack","webslide"],"latest_commit_sha":null,"homepage":"https://nodeppt.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ksky521.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-15T07:43:44.000Z","updated_at":"2025-02-16T23:17:19.000Z","dependencies_parsed_at":"2022-07-14T08:32:13.872Z","dependency_job_id":null,"html_url":"https://github.com/ksky521/nodeppt","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fnodeppt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fnodeppt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fnodeppt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fnodeppt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ksky521","download_url":"https://codeload.github.com/ksky521/nodeppt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240131747,"owners_count":19752727,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css3","html-presentation","html5","javascript","javascript-library","keynote","markdown","markdown-it","posthtml","ppt","presentation","slides","slideshow","webpack","webslide"],"created_at":"2024-07-30T19:00:37.115Z","updated_at":"2025-02-25T17:22:25.317Z","avatar_url":"https://github.com/ksky521.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003enodeppt 2.0\u003c/h1\u003e\n\n\u003e 累死累活干不过做 PPT 的！\u003cbr/\u003e \u003e **查看效果：https://nodeppt.js.org**\n\n[![Markpress npm badge](https://nodei.co/npm/nodeppt.png)](https://www.npmjs.com/package/nodeppt)\n\n\n**nodeppt 2.0** 基于[webslides](https://github.com/webslides/WebSlides)、webpack、markdown-it、posthtml 重构，[新效果](https://nodeppt.js.org)\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n```bash\nnpm install -g nodeppt\n```\n\n## TODO\n* bug fix\n* 增加多页编辑公共资源，说人话就是 splitChunks\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n简化了，就三个命令：\n\n-   new：使用线上模板创建一个新的 md 文件\n-   serve：启动一个 md 文件的 webpack dev server\n-   build：编译产出一个 md 文件\n\n```bash\n# create a new slide with an official template\n$ nodeppt new slide.md\n\n# create a new slide straight from a github template\n$ nodeppt new slide.md -t username/repo\n\n# start local sever show slide\n$ nodeppt serve slide.md\n\n# to build a slide\n$ nodeppt build slide.md\n```\n\n### 帮助\n\n```bash\n# help\nnodeppt -h\n# 获取帮助\nnodeppt serve -h\n```\n\n\u003ch2 align=\"center\"\u003e演讲者模式\u003c/h2\u003e\n\nnodeppt 有演讲者模式，在页面 url 后面增加`?mode=speaker` 既可以打开演讲者模式，双屏同步\n\n\u003ch2 align=\"center\"\u003eKeyboard Shortcuts\u003c/h2\u003e\n\n-   Page: ↑/↓/←/→ Space Home End\n-   Fullscreen: F\n-   Overview: -/+\n-   Speaker Note: N\n-   Grid Background: Enter\n\n\u003ch2 align=\"center\"\u003e公共资源：public 文件夹\u003c/h2\u003e\n\n如果项目文件夹下，存在`public`文件夹，可以直接通过 url 访问，参考`webpack dev server`的 `contentBase` 选项。\n\n在`build`的时候，public 文件夹中的文件会完全 copy 到`dist`文件夹中\n\n\u003ch2 align=\"center\"\u003e编写\u003c/h2\u003e\n\n最佳体验是 chrome 浏览器，本来就是给做演示用的，所以就别考虑非 Chrome 浏览器兼容问题了！\n\n这里说下怎么编写。\n\n### 基本语法\n\n整个 markdown 文件分为两部分，第一部分是写在最前面的**配置**，然后是使用`\u003cslide\u003e`隔开的每页幻灯片内容。\n\n### 配置\n\nnodeppt 的配置是直接写在 md 文件顶部的，采用 yaml 语法，例如下面配置：\n\n```yaml\ntitle: nodeppt markdown 演示\nspeaker: 三水清\nurl: https://github.com/ksky521/nodeppt\njs:\n    - https://www.echartsjs.com/asset/theme/shine.js\nprismTheme: solarizedlight\nplugins:\n    - echarts\n    - mermaid\n    - katex\n```\n\n-   title: 演讲主题\n-   speaker：演讲者\n-   url：地址\n-   js：js 文件数组，放到 body 之前\n-   css：css 文件数组，放到头部\n-   prismTheme：prism 配色，取值范围 `['dark', 'coy', 'funky', 'okaidia', 'tomorrow', 'solarizedlight', 'twilight']`\n-   plugins：目前支持 [echarts](https://echarts.baidu.com/)，[mermaid](https://mermaidjs.github.io/)和 [katex](https://katex.org) 三个插件\n\n#### 插件\n\n目前 nodeppt 支持 [图表 echarts](https://echarts.baidu.com/)，[流程图 mermaid](https://mermaidjs.github.io/)，[数学符号 KaTeX](https://katex.org) 三个插件。\n\n#### echarts\n\necharts 主题配色可以直接在`yaml`配置的 js 中引入。echarts 采用`fence`语法，如下：\n\n```echarts\n{\n    xAxis: {\n        type: 'category',\n        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n    },\n    yAxis: {\n        type: 'value'\n    },\n    series: [{\n        data: [820, 932, 901, 934, 1290, 1330, 1320],\n        type: 'line'\n    }]\n}\n```\n详见[site/echarts.md](./site/echarts.md)\n\n#### mermaid\n\nmermaid 主题配色可以直接在`yaml`配置的 js 中引入。mermaid 采用`fence`语法，如下：\n\n```mermaid\nsequenceDiagram\n    Alice -\u003e\u003e Bob: Hello Bob, how are you?\n    Bob--\u003e\u003eJohn: How about you John?\n    Bob--x Alice: I am good thanks!\n    Bob-x John: I am good thanks!\n    Note right of John: Bob thinks a long\u003cbr/\u003elong time, so long\u003cbr/\u003ethat the text does\u003cbr/\u003enot fit on a row.\n\n    Bob--\u003eAlice: Checking with John...\n    Alice-\u003eJohn: Yes... John, how are you?\n```\n\n详见[site/mermaid.md](./site/mermaid.md)\n#### ketex\n\n参考：[markdown-it-katex](https://www.npmjs.com/package/markdown-it-katex)语法\n\n### `\u003cslide\u003e` 语法\n\nnodeppt 会根据`\u003cslide\u003e`对整个 markdown 文件进行拆分，拆成单页的幻灯片内容。`\u003cslide\u003e` 标签支持下面标签：\n\n-   class/style 等：正常的 class 类，可以通过这个控制居中（aligncenter），内容位置，背景色等\n-   image：背景图片，基本语法 `image=\"img_url\"`\n-   video：背景视频，基本语法 `video=\"video_src1,video_src2\"`\n-   :class：wrap 的 class，下面详解\n\n每个 slide 会解析成下面的 html 结构：\n\n```html\n\u003csection class=\"slide\" attrs...\u003e\u003cdiv class=\"wrap\" wrap=\"true\"\u003e// 具体 markdown 渲染的内容\u003c/div\u003e\u003c/section\u003e\n```\n\n其中`\u003cslide\u003e` 的`class`等会被解析到 `\u003csection\u003e`标签上面，而`:class`则被解析到`div.wrap`上面，例如：\n\n```html\n\u003cslide :class=\"size-50\" class=\"bg-primary\"\u003e\u003c/slide\u003e\n```\n\noutput 为：\n\n```html\n\u003csection class=\"slide bg-primary\"\u003e\u003cdiv class=\"wrap size-50\" wrap=\"true\"\u003e// 具体 markdown 渲染的内容\u003c/div\u003e\u003c/section\u003e\n```\n\n#### 背景：图片\n\n`\u003cslide\u003e`的`image` 会被解析成背景大图，常见的支持方式有：\n\n```md\n\u003cslide image=\"https://source.unsplash.com/UJbHNoVPZW0/\"\u003e\n\n# 这是一个普通的背景图\n\n\u003cslide image=\"https://source.unsplash.com/UJbHNoVPZW0/ .dark\"\u003e\n\n# 这张背景图会在图片上面蒙一层偏黑色的透明层\n\n\u003cslide image=\"https://source.unsplash.com/UJbHNoVPZW0/ .light\"\u003e\n\n# 这张背景图会在图片上面蒙一层偏白色的透明层\n\n\u003cslide class=\"bg-black aligncenter\" image=\"https://source.unsplash.com/n9WPPWiPPJw/ .anim\"\u003e\n\n# 这张背景图会缓慢动\n```\n\n详见[site/background.md](./site/background.md)和[在线演示](https://js8.in/nodeppt/background.html)\n\n### 样式\n\n样式太多，具体详见[site/classes.md](./site/classes.md)和[在线演示](https://js8.in/nodeppt/classes.html)\n\n### 布局\n\nnodeppt 这次使用`webslides`的布局，支持丰富的布局，实在太多了，直接看文档[site/layout.md](./site/layout.md)和[在线演示](https://js8.in/nodeppt/layout.html)\n\n### attribute\n\n参考[markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs)，支持了`attribute`，修改增加多 class 支持等功能。\n\n其中：`..class`会往上一级节点添加 class，支持`{.class1.class2}`这种多 class 的语法。用法举例：\n\n```markdown\n# header {.style-me.class2}\n\nparagraph {data-toggle=modal}\n```\n\nOutput:\n\n```html\n\u003ch1 class=\"style-me class2\"\u003eheader\u003c/h1\u003e\n\u003cp data-toggle=\"modal\"\u003eparagraph\u003c/p\u003e\n```\n\n```markdown\nUse the css-module green on this paragraph. {.text-intro}\n```\n\nOutput:\n\n```html\n\u003cp class=\"text-intro\"\u003eUse the css-module green on this paragraph.\u003c/p\u003e\n```\n\n```markdown\n-   list item **bold** {.red}\n```\n\nOutput:\n\n```html\n\u003cul\u003e\n    \u003cli class=\"red\"\u003elist item \u003cstrong\u003ebold\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n```markdown\n-   list item **bold**\n    {.red}\n```\n\nOutput:\n\n```html\n\u003cul class=\"red\"\u003e\n    \u003cli\u003elist item \u003cstrong\u003ebold\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### image 增强\n\n对于 image ，支持外面包裹一层的写法，具体语法 `!![](图片地址 属性)`，例如：\n\n```markdown\n!![](https://webslides.tv/static/images/iphone.png .size-50.alignleft)\n```\n\nOutput：\n\n```html\n\u003cimg src=\"https://webslides.tv/static/images/iphone.png\" class=\"size-50 alignleft\" /\u003e\n```\n\n```markdown\n!![figure](https://webslides.tv/static/images/setup.png .aligncenter)\n```\n\nOutput:\n\n```html\n\u003cfigure\u003e\u003cimg src=\"https://webslides.tv/static/images/setup.png\" class=\"aligncenter\" /\u003e\u003c/figure\u003e\n```\n\n### button\n\nnodeppt 的 button 是类似`link`语法的，支持蓝色、圆角、空心和 icon 版本的 button：\n\n```markdown\n[普通按钮](){.button} [圆角普通按钮](){.button.radius}\n\n[空心](){.button.ghost} [:fa-github: 前面带 icon](){.button}\n```\n\n### Icon：FontAwesome\n\nnodeppt 的 icon 支持 [FontAwesome](https://fontawesome.com/)\n语法：\n\n-   `:fa-xxx:` → `\u003ci class=\"fa fa-xxx\"\u003e\u003c/i\u003e`\n-   `:~fa-xxx:~` → `\u003cspan\u003e\u003ci class=\"fa fa-xxx\"\u003e\u003c/i\u003e\u003c/span\u003e`\n-   `::fa-xxx::` → 块级`\u003ci class=\"fa fa-xxx\"\u003e\u003c/i\u003e`，即不会被`p`包裹\n\n### span\n\n代码修改自[markdown-it-span](https://github.com/pnewell/markdown-it-span/)，支持 `attr`语法，基本用法：\n\n```md\n:span:\n:span: {.text-span}\n```\n\n### 动效\n\nnodeppt 一如既往的支持动效，2.0 版本支持动效主要是页面内的动效。\n\n支持动效包括：\n\n-   fadeIn\n-   zoomIn\n-   rollIn\n-   moveIn\n-   fadeInUp\n-   slow\n\n在需要支持的动效父节点添加`.build`或者在具体的某个元素上添加`.tobuild+动效 class`即可。\n\n按照惯例，nodeppt 还支持`animate.css`的动效哦~\n\n详细查看文件：[site/animation.md](./site/animation.md)和[在线演示](https://js8.in/nodeppt/animation.html)\n\n### 使用强大的`:::`完成复杂布局\n\n`:::`语法是扩展了 [markdown-it-container](https://www.npmjs.com/package/markdown-it-container) 语法，默认是任意 tag，例如\n\n```markdown\n:::div {.content-left}\n\n## title\n\n:::\n```\n\nOutput：\n\n```html\n\u003cdiv class=\"content-left\"\u003e\u003ch2\u003etitle\u003c/h2\u003e\u003c/div\u003e\n```\n\n还支持，`tag` 嵌套，除此之外，支持的组件包括：\n\n-   card：卡片，一边是图片，一边是内容\n-   column：column 多栏布局\n-   shadowbox：带阴影的盒子\n-   steps：步骤组件\n-   cta：\n-   gallery：图片\n-   flexblock：flex block 布局，支持多个子类型\n-   note: 演讲注释\n\n基本语法是：\n\n```markdown\n:::TYPE {.attrs}\n\n## 第一部分\n\n使用 hr 标签隔开\n\n---\n\n## 第二部分\n\n这里的内容也是哦\n\n:::\n```\n\n详细可以看 [component](./site/component.md) 部分的 markdown 文件和[在线演示](https://js8.in/nodeppt/component.html)\n\n\u003ch2 align=\"center\"\u003e打印？导出 pdf？\u003c/h2\u003e\n\nchrome 浏览器，直接在第一页 `command+P/ctrl+P` 即可\n\n\u003ch2 align=\"center\"\u003e高级玩法\u003c/h2\u003e\n\n如果上面\n\n### `nodeppt.config.js`\n\n在 nodeppt 执行路径下创建`nodeppt.config.js`文件，可以配置跟`webpack`相关的选项，另外可以支持自研 nodeppt 插件。\n\n默认内置的`config.js`内容如下：\n\n```js\n/**\n * @file 默认配置\n */\nmodule.exports = () =\u003e ({\n    // project deployment base\n    baseUrl: '/',\n\n    // where to output built files\n    outputDir: 'dist',\n\n    // where to put static assets (js/css/img/font/...)\n    assetsDir: '',\n\n    // filename for index.html (relative to outputDir)\n    indexPath: 'index.html',\n    // 插件，包括 markdown 和 posthtml\n    plugins: [],\n    // chainWebpack: [],\n\n    // whether filename will contain hash part\n    filenameHashing: true,\n\n    // boolean, use full build?\n    runtimeCompiler: false,\n\n    // deps to transpile\n    transpileDependencies: [\n        /* string or regex */\n    ],\n\n    // sourceMap for production build?\n    productionSourceMap: true,\n\n    // use thread-loader for babel \u0026 TS in production build\n    // enabled by default if the machine has more than 1 cores\n    parallel: () =\u003e {\n        try {\n            return require('os').cpus().length \u003e 1;\n        } catch (e) {\n            return false;\n        }\n    },\n\n    // multi-page config\n    pages: undefined,\n\n    // \u003cscript type=\"module\" crossorigin=\"use-credentials\"\u003e\n    // #1656, #1867, #2025\n    crossorigin: undefined,\n\n    // subresource integrity\n    integrity: false,\n\n    css: {\n        extract: true\n        // modules: false,\n        // localIdentName: '[name]_[local]_[hash:base64:5]',\n        // sourceMap: false,\n        // loaderOptions: {}\n    },\n\n    devServer: {\n        /*\n      host: '0.0.0.0',\n      port: 8080,\n      https: false,\n      proxy: null, // string | Object\n      before: app =\u003e {}\n    */\n    }\n});\n```\n\n### parser plugin\n\n解析插件分两类： `markdown-it` 和 `posthtml`，\n\n-   markdown-it：是解析 markdown 文件的，如果是增强 markdown 语法，可以用这类插件\n-   posthtml：是处理 html 标签的，如果是修改输出的 html 内容，可以用这类插件\n\n定义一个 plugin ：\n\n```js\nmodule.exports = {\n    // 这里的 id 必须以 markdown/posthtml开头\n    // 分别对应 markdown-it和 posthtml 插件语法\n    id: 'markdown-xxx',\n    // 这里的 apply 是插件实际的内容，详细查看 markdown-it和 posthtml 插件开发\n    apply: () =\u003e {}\n};\n```\n\n-   [markdown-it docs](https://github.com/markdown-it/markdown-it/tree/master/docs)\n-   [posthtml docs](https://github.com/posthtml/posthtml/tree/master/docs)\n\n### webslides plugin\n\nWebSlides 插件需要写到一个 js 文件中，然后作为数组放到`window.WSPlugins_`中，然后通过在 md 页面的配置（yaml）添加 js 的方法引入。\n\n```md\njs: - webslide_plugins.js\n```\n\n```js\n// webslide_plugins.js内容\nwindow.WSPlugins_ = [\n    {\n        id: 'webslide_plugin_name',\n        // 下面是对应的插件类\n        apply: class Plugin {}\n    }\n];\n```\n\n参考[WebSlides 文档](https://github.com/webslides/WebSlides/wiki/Plugin-development)\n\n### Template：自制模板\n\n参考[nodeppt-template-default](https://github.com/ksky521/nodeppt-template-default)。\n\n然后使用`nodeppt new username/repo xxx.md`使用\n\n\u003ch2 align=\"center\"\u003eThanks\u003c/h2\u003e\n\n-   [WebSlides](https://github.com/webslides/WebSlides)\n-   [markdown-it](https://github.com/markdown-it/markdown-it)\n-   [posthtml](https://github.com/posthtml/posthtml)\n-   [webpack](https://github.com/webpack/webpack)\n-   [vue-cli](https://github.com/vuejs/vue-cli)\n","funding_links":[],"categories":["JavaScript","Repository","前端开发框架及项目","辅助","工具","前端常用"],"sub_categories":["Office","其他_文本生成、文本对话","在线工具"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksky521%2Fnodeppt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fksky521%2Fnodeppt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksky521%2Fnodeppt/lists"}