大家好，我是Ai学习的老章

大家好，我是 Ai 学习的章北海

先看个视频

文案来源：我特别喜欢的三个DeepSeek版本

我又发现的一个制作 PPT 的方案：大模型结合 Slidev

浏览器即可运行，翻页 + 辉光动效

这算是我之前介绍过大模型与 PPT 结合的另一种玩法（前文：用大模型，把论文变成_PPT_、大模型做 PPT，三种方案：Kimi+AiPPT、Gamma、Claude+SVG

下面看看具体是如何实现

什么是 Slidev？

Slidev（https://v/）是一个为开发者量身定制的开源演示文稿工具，它将开发者熟悉的工作流与现代网页技术相结合，提供了一种全新的创建和展示幻灯片的方式。

与传统的演示文稿工具（如 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 在浏览器中创建幻灯片：v/new

这个页面本身也很适合学习 Slidev 的基本操作

比如可以自行修改 slide.md 的内容，看最右侧 PPT 预览区的变化

在本地创建项目

  1. 确保已安装 Node.js >= 18.0
  2. 在终端运行以下命令创建新项目：
# 使用 npm
npm init slidev@latest

# 或使用 pnpm
pnpm create slidev

# 或使用 yarn
yarn create slidev
  1. 根据提示完成项目创建，幻灯片内容将在 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

---

大模型做PPT，全新玩法，浏览器运行，可发布到互联网


# 这是一个居中的页面

代码块

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、深度学习、机器学习等