大家好，我是Ai学习的老章
大家好，我是 Ai 学习的章北海
先看个视频
文案来源：
我又发现的一个制作 PPT 的方案：大模型结合 Slidev
浏览器即可运行，翻页 + 辉光动效
这算是我之前介绍过大模型与 PPT 结合的另一种玩法（前文：、
下面看看具体是如何实现
什么是 Slidev？
Slidev（https://sli.dev/）是一个为开发者量身定制的开源演示文稿工具，它将开发者熟悉的工作流与现代网页技术相结合，提供了一种全新的创建和展示幻灯片的方式。
与传统的演示文稿工具（如 PowerPoint、Keynote）不同，Slidev 以 Markdown 为基础，让开发者能够使用代码和文本来创建精美的演示文稿。
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）和页面间的过渡动画，让你的演示更具表现力。
绘图与批注 ：内置绘图模式，可以在幻灯片上自由地进行绘图和批注，非常适合用于讲解和强调。
通过 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 中使用
热门跟贴