投稿
  1. 商川网首页
  2. 知识百科

js幻灯片制作技巧

luoluo • • 知识百科

简介
nodeppt是一款将Markdown文档转成幻灯片，在浏览器演示的开源免费好用的工具。最新版本2.1.5，github star 6.9K+, MIT协议。
在线体验地址：
https://nodeppt.js.org/#slide=1
官网截图：
nodeppt一款免费将Markdown文档转成幻灯片并在浏览器演示的工具
快速上手
简化了，就三个命令：
new：使用线上模板创建一个新的 md 文件serve：启动一个 md 文件的 webpack dev serverbuild：编译产出一个 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
帮助
# helpnodeppt -h# 获取帮助nodeppt serve -h
演讲者模式
nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步
Keyboard Shortcuts
Page: ↑/↓/←/→ Space Home EndFullscreen: FOverview: -/+Speaker Note: NGrid Background: Enter
公共资源：public 文件夹
如果项目文件夹下，存在public文件夹，可以直接通过 url 访问，参考webpack dev server的 contentBase 选项。
在build的时候，public 文件夹中的文件会完全 copy 到dist文件夹中
编写
最佳体验是 chrome 浏览器，本来就是给做演示用的，所以就别考虑非 Chrome 浏览器兼容问题了！
基本语法
整个 markdown 文件分为两部分，第一部分是写在最前面的配置，然后是使用隔开的每页幻灯片内容。
配置
nodeppt 的配置是直接写在 md 文件顶部的，采用 yaml 语法，例如下面配置：
title: nodeppt markdown 演示speaker: 三水清url: : – https://www.echartsjs.com/asset/theme/shine.jspri**Theme: solarizedlightplugins: – echarts – mermaid – katextitle: 演讲主题speaker：演讲者url：地址js：js 文件数组，放到 body 之前css：css 文件数组，放到头部pri**Theme：pri** 配色，取值范围 [‘dark’, ‘coy’, ‘funky’, ‘okaidia’, ‘tomorrow’, ‘solarizedlight’, ‘twilight’]plugins：目前支持 echarts，mermaid和 katex 三个插件
插件
目前 nodeppt 支持 图表 echarts，流程图 mermaid，数学符号 KaTeX 三个插件。
总结
nodeppt 2.0这么好用的免费神器，速速用起来。

本文来自投稿，不代表商川网立场，如若转载，请注明出处：http://www.sclgvs.com/zhishi/71232.html

赞 (0)
luoluoluoluo
0
上一篇 2023年 8月 9日 06:46:12
下一篇 2023年 8月 9日 06:46:15

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。