这个开源项目很有创新,可以将 markdown 格式写的内容像 PPT 那样在浏览器展示。也算是把 markdown 用到了极致, 当然了它本身也对 markdown 语法做了些扩展。
Slidev 使用 Vue 和 TS 开发的,使用的人很多,社区也非常活跃,github 上的星数现在都有41.8k了,非常适合用来在公司内部做一些技术分享。
效果展示
先写一段 markdown 文本。
然后就能显示精美的演示稿
主要特点。
-
基于 Markdown
Slidev 使用扩展的 Markdown 格式来写幻灯片,这本身就对开发者很友好,现在只要是个开发者基本都会写 markdown。
-
对开发者友好
对编写时的语法高亮补全的支持非常好,支持Shiki Magic Move和TwoSlash 集成。Shiki Magic Move让代码块的显示具有动画的效果,而TwoSlash能以悬浮框的形式显示某个类或字段的详细注释信息。有这两个强大的工具让编程技术的讲解更生动。
-
主题丰富
主题可以通过 npm 包来安装,只需要一行代码就可以将主题应用到幻灯片中。官方团队和社区也打造了很多精美的主题。
-
可以使用 HTML,CSS 来定制每页 PPT 的展示样式。
-
支持图表
Slidev 内置 Mermaid,这样标记为 mermaid 的代码块会自动转成类图,流程图,管道图等图表。
-
支持动画
Slidev 内置很多动画指令和动画组件,即可以快速的实现一些简单的过渡动画,又可以通过内置的
@vueuse/motion库来实现复杂的动画。 -
支持导出为 PDF/PNG
-
支持静态部署
你可以把制作好的演示稿打包成一个单页面网站部署到服务器,这样其它人就可以看到了。
-
即时预览
你在编辑器中对幻灯片的修改都会立即更新到浏览器中,无需刷新。
-
可交互
你可以在幻灯片中编写 Vue 组件并在演示过程中与之交互,这样可以更灵活的表达自己的想法。
-
录制功能
Slidev 还提供了内置的录制和摄像头视图功能。这样你可以在演示中分享你的摄像头或者分别录制并保存你的屏幕和摄像头画面。
安装使用和部署
新建幻灯片
执行命令创建一个新的 Slidev 项目:
npm init slidev@latest
根据指引,输入项目名称并按照提示完成项目创建。幻灯片内容在 slides.md 文件中,初始内容包含了 Slidev 的大部分功能的演示
编写
在项目根目录中的 slides.md 文件中按如下格式编写内容。
<!-- 首页 -->
# Title
Hello, **Slidev**!
---
<!-- 第二页 -->
# Slide 2
使用代码块来高亮代码:
```ts
console.log("Hello, World!");
```
---
<!-- 第三页 -->
# Slide 3
使用 UnoCSS 类和 Vue 组件来为你的幻灯片添加样式和丰富内容:
<div class="p-3">
<Tweet id="..." />
</div>
执行slidev --open命令可以边编写边实时预览。
部署
在项目根目录下执行slidev build命令就可以构建打包为静态网页了,直接放在服务器配置好域名就可以打开链接预览了。