Back to notes

Slidev-更适合程序员使用的PPT制作工具

AI summary · Qwen Summary in Chinese Indexed
Original source

这篇文章介绍Slidev作为基于Markdown和前端技术栈的PPT工具，适合程序员编写、定制、导出并静态部署演示文稿。

背景与定位

  • 作者因公司前端技术分享需要制作PPT。
  • 作者习惯编码但不习惯传统PPT工具。
  • 作者认为Slidev效率较高且功能强大。

程序员友好特性

  • 使用扩展Markdown语法编写内容，默认文件为./slides.md。
  • 支持完整Markdown语法和代码块展示。
  • 可用HTML和CSS定制每页展示样式。

图表与动画

  • 内置Mermaid，mermaid代码块可自动转换为图表。
  • 内置动画指令和动画组件。
  • 内置@vueuse/motion库，可实现更复杂动画。

导出与部署

  • 支持导出为PDF/PNG。
  • 支持将PPT打包为单页应用并静态部署。
  • 部署后可通过URL在线查看。

安装与编写

  • 需要NodeJS ≥ 14，并通过npm安装。
  • 执行npm init slidev@latest可创建项目。
  • 推荐用VSCode打开项目并编辑slides.md。

静态部署示例

  • 作者将PPT部署到Cloudflare Pages。
  • 启用PDF下载需配置download: true和exportFilename。
  • 预生成PDF依赖Playwright，需安装playwright-chromium。

项目资源

  • Slidev官网地址为https://cn.sli.dev/。
  • 作者示例项目地址为https://github.com/beilunyang/modernized-front-end-development。
  • 作者单页应用地址为https://modernized-front-end-development.pages.dev/。