最近在准备一个技术分享时我发现手头的 PPT 模板要么样式老旧要么在调整排版上花费大量时间。后来我把整套幻灯片切换到 Markdown 编写配合 AI 辅助生成大纲和讲稿整个制作效率明显提升。这篇文章会从 Markdown 做幻灯片的核心思路讲起带你完成环境搭建、语法拆分、AI 辅助生成、本地预览、导出分享的完整流程。无论你是刚接触 Markdown 的新人还是想优化幻灯片制作效率的开发者都能从中获得一套可直接复用的方案。1. 背景与核心概念1.1 为什么用 Markdown 写幻灯片Markdown 是一种轻量级标记语言它的核心思路是用简单的符号表达文档结构比如用#表示标题、用-表示列表、用表示引用。以前我们习惯用 WPS 或 PowerPoint 做幻灯片所有内容都需要手动拖拽、对齐、调字号一场分享下来光是排版就消耗大量精力。用 Markdown 写幻灯片之后内容和样式就分离开了。你只需要专注撰写文字、组织逻辑渲染工具会自动把标题、正文、代码块、图片转换为美观的页面。这样做有四个明显好处文本形式便于版本管理一行一行的小修改记录得非常清楚。内容可以放在 Git 仓库里团队协作时不需要反复传文件。通过 CSS 或内置主题可以统一控制整套幻灯片风格。纯文本内容天然适合 AI 处理可以快速生成大纲、补充讲稿。1.2 常见 Markdown 幻灯片工具想用 Markdown 做幻灯片除了最基本的 Markdown 编辑器还需要一个能把 Markdown 渲染成幻灯片的工具。目前比较常见的有 Marp、Slidev、Reveal.js。Marp 是三者中最容易上手的方案它提供了一个 VS Code 插件写好 Markdown 之后直接预览也可以导出为 PDF、PPTX 和 HTML。Marp 的语法基于标准 Markdown用---分隔线表示每一页的结束学习成本很低。Slidev 是基于 Vue 和 Vite 的幻灯片工具适合需要写复杂交互、动画、组件嵌套的进阶用户。它的目录结构更工程化页面之间可以引入 Vue 组件但配置成本比 Marp 高。Reveal.js 则是老牌 HTML 幻灯片框架适合前端开发者自定义样式。对于大多数场景我推荐先用 Marp 入门因为它的环境搭建最简单后续如果遇到交互需求再迁移到 Slidev 也不迟。MD 转幻灯片工具对比工具上手难度交互能力导出格式适合场景Marp低弱PDF、PPTX、HTML快速制作、日常分享Slidev中强PDF、PPTX、SPA技术分享、课程课件Reveal.js中高强HTML、PDF前端自定义场景1.3 AI 在幻灯片制作中的角色AI 辅助幻灯片制作并不是简单地把文本丢给大模型而是把整个创作流程拆成几个环节让 AI 在每个环节中提供不同的支持大纲生成告诉 AI 分享主题和受众AI 会产出幻灯片结构。素材扩写把提纲中的每一条要点扩展为完整段落。亮点提炼把过于啰嗦的内容压缩成适合演讲的短句。代码示例让 AI 生成与主题匹配的示例代码块。排版优化让 AI 输出规范的 Markdown 格式包括分级标题、列表、表格、引用等。这里要注意AI 生成的内容不能直接照搬它有可能产出重复信息或与你的实际项目不一致。你应该把它当做一个高效率的素材助手最终内容质量一定要人工把关。2. 环境准备与版本说明2.1 基础环境要求在开始之前需要准备以下环境具体版本以你的操作系统和实际需求为准操作系统Windows 10/11、macOS 或主流 Linux 发行版。Node.js部分导出功能依赖 Node.js建议安装 LTS 版本。VS Code作为 Markdown 编辑和预览的主要 IDE。Git可选用于版本管理。Marp 的完整版本演进比较快本文不锁定某个具体版本重点演示通用配置思路。如果使用过程中遇到版本兼容问题优先检查 VS Code 插件和 Marp CLI 的版本是否匹配。如果本机不方便安装 Node.js也可以直接使用 VS Code 插件完成预览和导出CLI 主要用于自动化构建流程。2.2 安装 VS Code 插件打开 VS Code进入扩展商店搜索 “Marp for VS Code”安装官方发布的插件。这个插件会接管 Markdown 文件的预览能力让你在编辑时直接看到幻灯片的渲染效果。安装完成后建议同时安装下面两个插件Markdown All in One提供目录生成、列表缩进、快捷键等增强体验。Markdown Preview Enhanced提供更丰富的 Markdown 预览能力适合查看表格和代码高亮。配合 VS Code 内置的 Markdown 预览一套轻量级编辑器环境就搭建完成了。2.3 安装 Marp CLI可选如果你需要把 Markdown 幻灯片自动导出为 PDF 或 PPTX推荐安装 Marp CLI。打开终端输入npm install -g marp-team/marp-cli安装完成后可以在终端中验证版本marp --version如果命令无法执行说明全局安装路径没有写入系统环境变量需要检查 Node.js 的 npm 全局目录配置。2.4 项目目录结构我建议为每次分享单独创建一个项目目录结构如下slides-demo/ ├── slides.md ├── images/ │ ├── logo.png │ └── screenshot.png ├── themes/ │ └── custom.css └── output/slides.md主幻灯片文件全部内容都写在这里。images存放项目中引用的图片。themes存放自定义 CSS 主题。output存放导出的 PDF 或 PPTX 文件。这种结构在团队协作时非常有用Markdown 文件负责内容images 文件夹负责资源themes 文件夹负责样式各个角色可以并行处理。3. Markdown 幻灯片语法核心3.1 从普通 Markdown 到幻灯片普通 Markdown 文档是一条长流阅读时从上往下滚动。幻灯片则要求内容被切割成多个独立页面每页只展示一个核心观点。Marp 的做法很简单使用---作为分页符把内容分隔成多个页面。下面是一个最小示例文件路径为slides.md# 第一页 这是第一页的内容。 --- # 第二页 这是第二页的内容。上面的 Markdown 会渲染成两页幻灯片每页各有一个一级标题和一段文字。这就是 Markdown 幻灯片最核心的分页逻辑。3.2 Marp 的 Front MatterMarp 支持在 Markdown 文件开头使用 YAML Front Matter 声明全局配置。这个配置区位于文件最顶部用两行---包裹--- marp: true theme: gaia paginate: true size: 16:9 ---参数含义如下marp: true告诉 Marp 插件这个文件要按幻灯片方式渲染。theme: gaia指定主题Marp 默认主题是 default更美观的主题是 gaia。paginate: true在每一页右下角显示页码。size: 16:9画布尺寸也可以设为4:3。除了全局配置Marp 还支持页面级指令写法是 HTML 注释!-- header: 项目周会汇报 -- !-- footer: 技术部 张三 --这两行注释会分别显示在每一页的顶部和底部适合添加分享人、会议名称等固定信息。3.3 主题和样式调整如果默认主题不能满足需求可以创建自定义 CSS 文件然后在 Front Matter 中引用。示例文件themes/custom.css/* theme custom */ section { background: #ffffff; font-family: PingFang SC, Microsoft YaHei, sans-serif; padding: 40px; } h1 { color: #2563eb; border-bottom: 3px solid #2563eb; padding-bottom: 10px; } table { border-collapse: collapse; width: 100%; } th { background-color: #2563eb; color: #ffffff; } img { max-width: 100%; }这是一种常见的商务风格主题蓝色标题加白色背景。theme custom这一行声明了主题名称在 Front Matter 中用theme: custom引用即可--- marp: true theme: custom paginate: true ---自定义主题的好处是风格完全可控适合企业品牌规范要求较高的场景。3.4 常用幻灯片语法示例在实际制作过程中下面这些语法使用频率最高标题层级# 一级标题 ## 二级标题 ### 三级标题列表- 要点一 - 要点二 - 子要点有序列表1. 第一步 2. 第二步 3. 第三步表格| 功能 | 说明 | | ---- | ---- | | 导出 | 支持 PDF 和 PPTX | | 预览 | 支持实时刷新 |代码块python def hello(): print(Hello Marp) 引用 技术分享的核心是让听众记住你的观点而不是记住你的幻灯片。Marp 对标准 Markdown 的支持比较完整你在普通 Markdown 写作中常用的语法都可以直接使用。3.5 图片和公式的处理图片在幻灯片制作中非常常见。Marp 支持相对路径引入图片如果想调整图片大小可以配合 CSS 或者使用 Marp 的背景语法。背景语法会在整个页面铺放一张图片这行指令会把图片放到页面右侧左侧留空给文字内容适合做项目截图对比。数学公式使用 LaTeX 语法以$符号包裹。在支持 KaTeX 渲染的主题中可以直接显示公式$$ E mc^2 $$需要注意终端环境中的反斜杠和$符号可能会被转义建议在写公式时留意渲染结果。4. AI 辅助 Markdown 幻灯片实战这一节我们用前面的语法知识完成一个“日常开发中如何用 Git 进行版本管理”的分享案例。整个过程会分步骤演示先创建项目结构再手写基础 Markdown 幻灯片然后用 AI 扩充内容、优化格式最后运行预览和导出。4.1 创建项目结构在终端中执行下面的命令mkdir slides-demo cd slides-demo mkdir -p images themes output touch slides.md执行完成后目录结构如下slides-demo/ ├── slides.md ├── images/ ├── themes/ └── output/此时slides.md是空文件下面我们开始写内容。4.2 手写基础幻灯片在slides.md中先写一个包含 Front Matter 和两页内容的最小版本--- marp: true theme: gaia paginate: true size: 16:9 --- # Git 版本管理实战分享 研发效能组 · 2025 年技术分享 --- ## 本次分享目标 - 理解 Git 基本工作流程 - 掌握常用分支管理策略 - 学会回滚与冲突解决在上面的示例中第一页是封面第二页列出分享目标。这里的关键是第二页使用了无序列表渲染后每一行会变成独立的项目符号非常适合幻灯片展示。4.3 使用 AI 生成大纲内容手动编写全部内容需要大量时间我们可以借助 AI 工具。常见的合规 AI 工具包括 ChatGPT、Claude、通义千问、文心一言、Kimi 等具体选择根据企业合规要求来定。为了让 AI 输出可用的内容提示词需要包含以下信息分享主题。目标听众身份。期望的页数和结构。输出格式必须严格使用 Markdown。需要包含的实际案例或代码示例。下面是一个可以直接复制的提示词模板我要准备一场面向初中级开发者的 Git 技术分享主题是“Git 版本管理实战”。 请按照以下结构生成 Markdown 格式的幻灯片内容 第 1 页封面标题和副标题。 第 2 页分享目标用列表列出 4 个目标。 第 3 页Git 基础概念包括工作区、暂存区、本地仓库。 第 4 页日常开发工作流建议使用有序列表。 第 5 页分支管理策略。 第 6 页常见冲突解决场景。 第 7 页回滚操作演示。 第 8 页总结和推荐资料。 注意每页内容保持简洁适合幻灯片展示不要出现大段文字。AI 生成结果往往已经符合 Markdown 语法但页面之间的分隔符---可能不完整或者标题层级和你想表达的逻辑不一致。此时需要人工调整把 AI 输出的内容整合到slides.md中。4.4 使用 AI 优化排版和 Markdown 格式AI 不仅能生成内容还能帮助优化格式。很多 AI 产物会把要点写成完整段落作为讲稿没问题但放进幻灯片就显得冗长。这时可以继续向 AI 提问请把下面的段落改写成适合幻灯片展示的短句要点保留核心信息 “Git 的工作流程通常包括三个关键区域工作区是你正在编辑的文件所在的目录 暂存区用于临时存放即将提交的更改而本地仓库则保存了所有已提交的历史版本。”AI 可能会返回- 工作区正在编辑的文件目录 - 暂存区临时存放待提交更改 - 本地仓库保存已提交的历史版本这种输出就非常符合幻灯片需求。如果 AI 输出的 Markdown 中出现了空行过多、列表嵌套混乱、标题层级不连续等问题也可以在提示词中补充要求请检查这段 Markdown确保标题层级从 # 开始连续向下列表缩进一致 表格列名与内容对齐代码块使用正确的 包裹。总结一下AI 在幻灯片制作中的价值不是替你决定内容而是帮你把“素材采集、内容扩写、风格转换、格式修正”这些重复性工作完成得更快。4.5 编写完整示例经过手写和 AI 辅助之后完整的slides.md内容如下--- marp: true theme: gaia paginate: true size: 16:9 header: Git 版本管理实战 footer: 研发效能组 --- # Git 版本管理实战分享 于 2025 年 · 研发效能组 --- ## 本次分享目标 - 理解 Git 基本工作流程 - 掌握常用分支管理策略 - 学会回滚与冲突解决 --- ## Git 三大核心区域 - 工作区你正在编辑的文件目录 - 暂存区临时存放待提交更改 - 本地仓库保存已提交的历史版本 --- ## 日常开发工作流 1. 编辑工作区文件 2. 使用 git add 添加到暂存区 3. 使用 git commit 写入本地仓库 4. 使用 git push 推送到远程仓库 bash git add . git commit -m feat: 完成用户模块 git push origin main分支管理策略分支类型用途命名示例主分支稳定发布版本main开发分支日常集成开发develop功能分支某个功能的独立开发feature/login冲突解决场景造成冲突的原因多人同时修改同一个文件。解决步骤拉取最新代码查看冲突标记手动保留正确内容重新提交并推送回滚操作演示# 查看提交历史 git log --oneline # 回滚到指定提交保留修改记录 git revert 5f4d3c2 # 强制回滚注意会丢失之后的所有提交 git reset --hard 5f4d3c2生产环境执行回滚前请务必确认当前分支和提交编号并提前做好备份。总结Git 是团队协作的基础工具掌握三大区域后日常操作会更清晰遇到冲突不要慌先定位再解决推荐阅读《Pro Git》和官方文档在写这个示例时我特别加入了几个细节 - 用表格展示分支策略便于听众快速对比。 - 代码块中加入了回滚操作的注释提醒生产环境风险。 - 引用块强调安全操作增强工程意识。 - 每个页面只保留一个核心内容避免信息过载。 ### 4.6 使用 CLI 导出文件 编辑完成后可以用 Marp CLI 导出 PDF。在终端执行 bash cd slides-demo marp slides.md --pdf --output output/slides.pdf如果希望导出 PPTX 格式可执行marp slides.md --pptx --output output/slides.pptx导出过程中终端会输出转换进度。如果遇到图片路径找不到、主题名不存在等问题Marp 会给出对应提示按提示调整即可。在 VS Code 中你还可以直接点击预览面板右上角的导出按钮图形化操作更适合手动流程。4.7 运行结果说明正常情况下第 1 页会显示“Git 版本管理实战分享”的大标题页面上方有“Git 版本管理实战”页眉下方有“研发效能组”页脚和页码。第 4 页会同时展示有序列表和代码块代码块使用深色背景高亮适合技术分享。如果页面布局显示异常优先检查标题层级是否连续、图片路径是否正确、表格是否有空行被误识别为分隔线。5. 常见问题与排查思路5.1 常见问题表格下面是使用 Markdown 制作幻灯片时最常遇到的几类问题可以按表格中的思路排查问题现象常见原因解决思路预览空白或无法渲染插件未启用检查文件头是否有marp: true页面没有分页效果分隔线写错确认使用独立的---行而不是***自定义主题不生效主题名写错核对 CSS 中的theme名称和 Front Matter 引用图片无法显示相对路径错误确认图片位于项目内部使用./images/xxx.png导出 PDF 失败Marp CLI 未安装重新执行npm install -g安装命令中文显示异常缺少中文字体在自定义 CSS 中声明系统字体5.2 无法预览的排查步骤如果你打开slides.md后预览面板仍然显示普通文档格式可以按以下顺序排查确认 VS Code 安装了 Marp for VS Code 插件。确认文件开头两行是---并且包含marp: true。点击 VS Code 右上角的预览按钮如果显示的还是普通 Markdown尝试点击预览面板右上角的“Marp”图标。重启 VS Code 窗口重新加载项目。5.3 图片路径和资源管理在 Markdown 幻灯片中图片路径建议使用相对路径并保持项目目录一致。比如图片放在images文件夹中Markdown 中引用./images/architecture.png。这样无论是本机预览还是导出 PDF资源定位都会更稳定。注意避免使用绝对路径这种写法在换机器后一定失效不建议在正式项目中采用。5.4 AI 生成的 Markdown 格式问题AI 生成的 Markdown 经常出现两类问题一是标题层级不连续。AI 可能直接从##开始写缺少一级标题。此时修复方法很简单在文件开头加一个# 幻灯片主题即可。二是无序列表和有序列表混用。AI 生成的内容有时会把步骤写成无序列表这会削弱流程感。你可以手动把有先后关系的列表改成1. 2. 3.的有序列表。如果 AI 生成了不存在的字体、接口或命令也要留意核实。尤其是命令行工具参数不同版本差异较大必须结合官方文档确认后再写进幻灯片。6. 最佳实践与工程建议6.1 内容先于排版使用 Markdown 做幻灯片的优势是让你把注意力集中在内容上。建议你先用文字把每页的核心观点写出来再考虑用什么层级、什么列表。排版是锦上添花如果内容逻辑混乱样式再好看也无法帮助听众理解。一个实用的习惯是每页只表达一个核心观点。如果一页内容超过 6 个小点就应该拆分或精简。6.2 善用 AI但人工把关AI 生成内容的速度很快但它不理解你的听众、不熟悉你的业务背景。因此AI 适合用于“初始素材生成”和“格式规范化”不适合直接作为最终成品。实践中的高效流程是先用 AI 生成完整大纲。人工筛选和调整大纲逻辑。让 AI 逐页扩写内容。人工校验事实、代码和引用。把内容放入 Marp 并预览。最后统一调整样式。6.3 把幻灯片纳入版本管理由于 Markdown 是纯文本非常适合纳入 Git 仓库。团队协作时每人负责不同章节通过分支合并完成最终版本。每一次修改都有历史记录即使误删内容也可以随时找回。建议在项目根目录添加.gitignore忽略导出文件output/ node_modules/ .DS_Store这样输出文件不会混入版本管理中仓库只保存源文件和资源。6.4 统一 CSS 样式如果公司有统一的品牌色调和字体规范建议把样式抽成独立 CSS 文件例如themes/corporate.css。不同分享者只需要在 Front Matter 中声明theme: corporate就能保证整套幻灯片风格一致。以后再调整品牌色时不需要修改每个 Markdown 文件只改一个 CSS 文件即可。6.5 注意导出格式的选择PDF适合发给听众阅读和打印字体显示稳定。PPTX适合需要再编辑的场景但复杂样式可能偏移。HTML适合在线分享支持浏览器直接打开。在导出 PPTX 时如果发现样式与预览不一致优先将交付形式切换为 PDF。技术分享场景中听众更关注内容本身PDF 完全够用。6.6 安全与合规提醒如果使用 AI 工具处理公司内部信息请严格按照公司的数据安全规范执行。不要将未公开的源码、客户信息、内部架构图直接输入到外部 AI 工具中。同时在 Git 操作中特别是在生产环境分支上执行git reset --hard前必须确认提交内容已备份或可以用git reflog找回这对团队项目尤为重要。7. 总结与下一步学习方向本文完成了 Markdown 幻灯片从零到一的全流程先用通俗方式说明为什么选择 Markdown 制作幻灯片接着搭建了 VS Code 插件和 Marp CLI 环境然后系统梳理了分页符、Front Matter、主题配置、图片和表格等核心语法再通过一个 Git 分享案例实际演示了手写与 AI 辅助生成相结合的生产流程最后整理了常见问题和工程化建议。如果你准备开始实践可以先从最轻量的一步做把下周要分享的 PPT 内容复制进slides.md加上#标题用---分页再把第一页做成封面。完成这一步你就已经感受到 Markdown 幻灯片的高效了。后续可以继续研究的方向有Slidev 的动画与组件机制适合制作更复杂的交互演示。Marp 自定义主题的 CSS 变量进一步优化视觉风格。使用 CI 自动导出 PDF在每次提交后生成最新版本。结合 AI 工具沉淀自己的提示词模板让生成内容更贴合个人分享习惯。相比传统幻灯片Markdown 写幻灯片的好处在于它可以像写代码一样管理、协作和迭代。现在就可以打开 VS Code创建你的第一个.md幻灯片文件把想法写下来然后用---分开每一页剩下的交给渲染工具就好。