大模型做PPT，全新玩法，浏览器运行，可发布到互联网
大模型做PPT，全新玩法，浏览器运行，可发布到互联网
大家好，我是Ai学习的老章
大家好，我是 Ai 学习的章北海
先看个视频
，时长00:13
文案来源：我特别喜欢的三个DeepSeek版本
我又发现的一个制作 PPT 的方案：大模型结合 Slidev
浏览器即可运行，翻页 + 辉光动效
这算是我之前介绍过大模型与 PPT 结合的另一种玩法（前文：用大模型，把论文变成_PPT_、大模型做 PPT，三种方案：Kimi+AiPPT、Gamma、Claude+SVG
下面看看具体是如何实现
什么是 Slidev？
Slidev（https://sli.dev/）是一个为开发者量身定制的开源演示文稿工具，它将开发者熟悉的工作流与现代网页技术相结合，提供了一种全新的创建和展示幻灯片的方式。
与传统的演示文稿工具（如 PowerPoint、Keynote）不同，Slidev 以 Markdown 为基础，让开发者能够使用代码和文本来创建精美的演示文稿。
Slidev 的核心特点
- 📝 Markdown 优先：所有内容都存放在一个纯文本的 Markdown 文件中，这使得版本控制、协作和内容复用变得极其简单。无需关心复杂的格式，只需专注于写作本身。
- 🧑💻 开发者友好：Slidev 的一切都为开发者而设计，可以使用熟悉的工具和技术栈，无缝集成代码编辑器、终端，甚至在幻灯片中运行代码。
- 🎨 高度可定制：从单个幻灯片的布局到整个演示文稿的主题，一切皆可定制。可以使用 CSS、WindiCSS/UnoCSS，甚至编写自己的 Vue 组件和布局，实现像素级的完美控制。
- ⚡ 快速且渐进：基于 Vite，Slidev 提供了闪电般的热更新体验。可以从一个简单的 Markdown 文件开始，在需要时逐步引入更复杂的功能，而不会感到不知所措。
- 🤹 可交互与集成：由于幻灯片本质上是一个 Web 应用，你可以嵌入任何 Vue 或 React 组件，创建动态图表、实时投票、现场编码演示等任何你能想到的交互式体验。
实际应用场景
- 技术演讲和分享
- 代码教学和培训
- 产品演示（特别是技术产品）
- 团队内部技术汇报
- 开发者大会和技术峰会
功能列表
Slidev 功能特别多。。。根本学不完，大概浏览一下就行了，对功能有一个大致印象
这些东西，后面也可以扔给大模型的
比较核心的有以下：
- Markdown 扩展：支持所有标准的 Markdown 语法，并增加了对脚注、目录等的支持。
- 代码高亮：内置 Shiki 和 Prism，提供像素级完美的代码语法高亮，支持行号显示、代码行高亮和 diff 查看。
- 图标：通过
unplugin-icons，可以直接在 Markdown 中使用来自数千个开源图标集的图标。 - LaTeX 公式：内置 KaTeX 支持，可以轻松地在幻灯片中编写和渲染复杂的数学公式。
- 图表与可视化：原生支持 Mermaid.js，可以通过文本描述快速创建流程图、序列图、甘特图等多种图表。
- 主题系统：提供多个官方主题，社区也贡献了大量主题。你可以轻松切换，也可以通过
eject命令弹出主题进行深度定制。 - 自定义布局：除了内置的
cover,intro,image-left等布局外，你还可以使用 Vue 组件创建自己的布局，并通过layout元数据在任何幻灯片上应用。 - 全局样式与组件：通过创建
style.css、global-top.vue或global-bottom.vue等文件，可以为所有幻灯片应用统一的样式、页眉或页脚。 - -可交互组件：无缝嵌入和使用 Vue 或 React 组件，为你的演示文稿增加动态和交互性。
- Monaco 编辑器集成：可以将代码块转换为功能齐全的 Monaco 编辑器，支持实时编码、代码 diff，甚至可以直接运行代码并显示结果。
- 动画：支持元素级的点击动画（v-click）和页面间的过渡动画，让你的演示更具表现力。
- 绘图与批注：内置绘图模式，可以在幻灯片上自由地进行绘图和批注，非常适合用于讲解和强调。
如何开始使用 Slidev
在浏览器中快速尝试
通过 StackBlitz 在浏览器中创建幻灯片：sli.dev/new
这个页面本身也很适合学习 Slidev 的基本操作
比如可以自行修改 slide.md 的内容，看最右侧 PPT 预览区的变化
在本地创建项目
- 确保已安装 Node.js >= 18.0
- 在终端运行以下命令创建新项目：
# 使用 npm
npm init slidev@latest
# 或使用 pnpm
pnpm create slidev
# 或使用 yarn
yarn create slidev
- 根据提示完成项目创建，幻灯片内容将在
slides.md文件中
基本命令
slidev- 启动开发服务器slidev export- 导出幻灯片（PDF、PPTX、PNG）slidev build- 构建为静态网页slidev format- 格式化幻灯片内容
幻灯片分隔符
使用三个连续的短横线 --- 来分隔你的幻灯片。你也可以在其后添加布局指令。
# 第一页
内容...
---
layout: image-right
---
# 第二页
这张幻灯片将使用 `image-right` 布局。
### Frontmatter
每一页幻灯片都可以有一个 Frontmatter 块，用于配置该页的特定元数据，如布局、样式、动画等。它使用 YAML 语法，并由 `---` 包裹。
```markdown
---
layout: center
class: 'text-center'
# 页面过渡动画
transition: slide-up
# 为 v-click 设置默认动画
clicks: 10
---
# 这是一个居中的页面
代码块
Slidev 对代码块提供了强大的支持。
- 语法高亮：通过在语言标识符后添加
{}来实现行高亮。
```ts {2,4-6|3,7}
// 第一轮点击高亮第 2, 4, 5, 6 行
// 第二轮点击高亮第 3, 7 行
function add(a: number, b: number): number {
return a + b;
}
```
- 行号：在 Frontmatter 中设置
lineNumbers: true或在代码块上单独设置。 - 导入代码片段：可以从外部文件中直接导入代码片段。
演讲者备注
在每张幻灯片的末尾，使用 <!-- ... --> 语法添加演讲者备注。这些备注只会出现在演示者模式中。
# 幻灯片标题
这里是幻灯片内容。
<!--
这里是给演讲者看的备注：
- 记得解释这个概念的背景。
- 准备回答可能的问题。
-->
样式化
- MDC 语法：Slidev 支持 MDC (Markdown Components) 语法，允许你在 Markdown 中直接使用和样式化组件。
- Scoped CSS：可以在 Frontmatter 中使用
<style>标签来定义仅对当前幻灯片生效的 CSS 样式。
深入定制：只需专注 slides.md
Slidev 的强大之处在于其极高的可扩展性。一个典型的例子就是通过 global-bottom.vue 组件来添加全局的背景或功能。
如果不会写vue怎么办？也可以把需求描述清楚，然后让大模型帮你写好。
比如在我这个项目中，global-bottom.vue 文件实现了一个非常酷炫的动态“辉光”背景特效。它通过读取每一页幻灯片在 slides.md 中定义的 Frontmatter 元数据（如 glow: 'right', glowOpacity: 0.5），动态生成流光溢彩的背景。
这个例子完美地诠释了 Slidev 的设计哲学：将复杂的实现封装起来，为用户提供最简洁的接口。一旦基础配置和组件设置完成，你就可以完全专注于 slides.md 的内容创作，Slidev 会在背后处理好所有复杂的渲染和交互逻辑。
在 Slidev 中更换主题非常简单。你只需要在 headmatter 中添加 theme 选项：
---
theme: seriph
---
# The first slide
也可以在 主题合集 中找到官方主题和社区主题。
主题名称的规范
- 你可以使用相对或绝对路径指定本地主题文件夹，例如
../my-theme - 你也可以直接使用完整的包名作为主题名称
- 如果主题是官方主题或者命名为
slidev-theme-name，你可以省略slidev-theme-前缀 - 对于作用域包，如
@org/slidev-theme-name，需要使用完整的包名
启动服务器后，你将会看到如下提示，选择同意即可安装该主题：
? The theme "@slidev/theme-seriph" was not found in your project, do you want to install it now? › (Y/n)
或者，也可以手动安装主题：
$ npm install @slidev/theme-seriph
大模型+Slidev
安装 vscode/cursor/windsurf 插件
Slidev 的 VS Code 扩展提供了一些特性
- 在侧边面板中预览幻灯片
- 幻灯片树形图
- 为幻灯片重新排序
- 幻灯片块的折叠
- 多幻灯片项目支持
- 一键启动开发服务器
克隆项目
git clone https://github.com/slidevjs/slidev
事实上，我们只需要编辑 slide.md 就行了
修改 slide.md
这部分也可以用大模型来生成，把链接、文本、甚至 PDF 扔给大模型
让其阅读、理解整个项目的用途后生成 slide.md 即可
运行 slidev
运行只需要执行 pnpm dev 即可
然后浏览器打开 http://localhost:3030/
其实也可以把这个 ppt 发布到互联网，这就需要域名支持了
比如在 cloudflare 买个域名，部署在 vercel，解析也用 cloudflare
搭建完美的写作环境：工具篇（12 章）图解机器学习 - 中文版（72 张 PNG）ChatGPT 、大模型系列研究报告（50 个 PDF）108页PDF小册子：搭建机器学习开发环境及Python基础 116页PDF小册子：机器学习中的概率论、统计学、线性代数 史上最全！371张速查表，涵盖AI、ChatGPT、Python、R、深度学习、机器学习等
腾讯云开发者
