专栏文章

从零开始的网页PPT展示

小小黑AWM
科技·工程参与者 56已保存评论 58

文章操作

快速查看文章及其快照的属性，并进行相关操作。

当前评论
58 条
当前快照
1 份
快照标识符
@mhz5rqbi
此快照首次捕获于
2025/11/15 01:55
4 个月前
此快照最后确认于
2025/11/29 05:24
3 个月前
查看原文
“你在干嘛？”
“写ppt”
"你这叫写ppt?"
[白眼]

开始之前先看看这个demo

太酷炫了有没有，讲课不用随身带U盘，到地方打开网站就可以开始展示，发课件回去不用发一大堆文件，只要发一个link过去就可以了，并且网页同步跳转无障碍。做ppt再也不用整晚整晚的纠结公式排版，Nodeppt 解决您所遇到的一切问题。
累死累活干不过ppt writer
Nodeppt 是基于 Node.js 由三水清开发的一款网页展示库，其具有简单易用，所思即所得，支持KaTeX，Echart，Mermaid的特点，作者不用纠结于排版，只需专注于内容，便可得到排版美观展示好看的网页ppt。

Why nodeppt?

就像 yfz 说的“都写这样的code了，为啥不用LaTeX？”没错，Beamer非常好用，而且写起来也和markdown一样顺手，那为啥还要费劲去学nodeppt呢？
  • 颜值决定一切 用 beamer 写出的 pdf，有一个通病，修改太烦，展示太单调。有时为了一些特殊场合，因为有对于课件美观的要求，不得不使用 ppt/WPS 来代替 LaTeX 做一些讲稿。然而用过的人都知道，这两个东西插入公式简直丧**狂。
  • 兼顾二者优点，合二为一。 既有 ppt 一样好看的展示效果，又有 LaTeX 一样方便插入公式，便于排版的特性。
  • 安慰健忘党 ，不知你可曾遇到过这种情况，老师叫你提前准备好讲课，你辛辛苦苦准备好了课件，到了上课之时却忘了带U盘，使用 Nodeppt 告别健忘！不慌不忙的走上讲台打开浏览器输入你的github部署地址吧！
  • 自由的写作空间 写 ppt 或者 LaTeX 经常会遇到这种情况，因为最终生成的页面大小是固定的，所以每一页能装的东西有限，经常需要一页分两页写，或者是把字体缩得很小，明明只是多了一点点内容，却要排版半天，这是件很烦人的事。而 Nodeppt 每一页的版面可以说是无限的，你既可以像网页一样向下滚动，也可以像 ppt 一样左右翻页！
  • 简单易用 对于对于大部分的OIer来说，其实是可以很熟练的编写Markdown文档的，但是对于LaTeX的演示文稿，未免就需要模板来助一臂之力了，而使用Nodeppt就几乎不需要学习额外知识！
  • 体量较轻 比 LaTeX 轻挺多的，至少我装CTeX有好几个G。
  • 演讲者模式，和 ppt 一样的功能，比 LaTeX 多一点优势。

Disadvantage?

  • 因为是网页展示，所以必须是有网的地方才能用，部署需要一些github经验。
  • 使用Chrome自带的 ctrl P 导出pdf效果感人。

How to get it?

  • 首先请确保您已安装 node.js 和包管理器 npm。
  • 输入以下命令
BASH
	sudo npm install -g nodeppt
  • 您获得了 nodeppt !
  • 然后只需使用这三个命令就可以开始了！第一个命令是从模板创建一个md文件，第二个是根据md文件形成html文件包用于网页部署，第三个是部署到本地8080端口，用于预览效果。
BASH
	nodeppt new xxx.md
	nodeppt build xxx.md
	nodeppt serve xxx.md

Some diffculties I had faced

  • 什么？node.js 版本过低？不慌！我们只需要两步就可以安装最新稳定版本的node.js
BASH
	sudo npm install -g n
	n stable
  • 什么？nodeppt serve一直编译失败？仔细读报错发现是 node-sass 由于 node.js 版本更新却没有更新，没事!
BASH
	npm rebuild node-sass
  • 什么？还是编译失败？仔细一看 nodeppt 的目录下面发现他自己有一个 node-sass，好那我们把我们自己安装的 node-sass 复制到这个目录下面替换掉不就行了！大功告成！

Now I have got nodeppt, how to use it?

nodeppt 的编写是完全按照 markdown 语法的，所以能写洛谷博客就可以写 nodeppt！同时官方文档里给出了多种不同的布局格式，和一些容器用法。

基本语法

整个 markdown 文件分为两部分，第一部分是写在最前面的配置，然后是使用<slide>隔开的每页幻灯片内容。其支持katex，echarts，mermaid等多个插件！

演讲者模式

nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步

键盘操作

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

<slide> 语法

nodeppt 会根据<slide>对整个 markdown 文件进行拆分，拆成单页的幻灯片内容。<slide> 标签支持下面标签：
  • class/style 等：正常的 class 类，可以通过这个控制居中（aligncenter），内容位置，背景色等
  • image：背景图片，基本语法 <slide image="img_url">
  • video：背景视频，基本语法 <slide video="video_src1,video_src2">
背景：图片
<slide>的image 会被解析成背景大图，常见的支持方式有：
MD
<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">

# 这张背景图会缓慢动

样式

样式太多，详见 demo 和 source

布局

nodeppt 这次使用webslides的布局，支持丰富的布局，实在太多了，直接看文档和在线演示

button

nodeppt 的 button 是类似link语法的，支持蓝色、圆角、空心和 icon 版本的 button：
MARKDOWN
[普通按钮](){.button} [圆角普通按钮](){.button.radius}

[空心](){.button.ghost} [:fa-github: 前面带 icon](){.button}

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包裹

Animation

nodeppt 一如既往的支持动效，2.0 版本支持动效主要是页面内的动效。
支持动效包括：
  • fadeIn
  • zoomIn
  • rollIn
  • moveIn
  • fadeInUp
  • slow
在需要支持的动效父节点添加.build或者在具体的某个元素上添加.tobuild+动效 class即可。
按照惯例，nodeppt 还支持animate.css的动效哦~
详细查看文件：site/animation.md和在线演示

使用强大的:::完成复杂布局

:::语法是扩展了 markdown-it-container 语法，默认是任意 tag，例如
MARKDOWN
:::div {.content-left}

How to build a website?

我们可以灵活运用 github 的 pages 功能，把 build 好的 html包直接 push 上去就可以了！

更多更骚的玩法请看官方demo和官方文档

评论

共 58 条评论，欢迎与作者交流。

正在加载评论...