1. 为什么选择MarpMarkdownVSCode组合第一次听说用Markdown写幻灯片时我内心是拒绝的——直到连续熬夜改了三版PPT后才真正体会到这个组合的妙处。想象一下当你用纯文本写完内容敲个命令就能生成专业级幻灯片还能自动同步到网页、PDF、PPTX三种格式这种一次编写到处演示的体验就像发现办公室咖啡机突然能出冰美式一样惊喜。传统幻灯片工具最大的痛点在于内容与样式的强耦合。我在某次产品发布会前夜因为调整某个文本框的位置导致整个排版崩坏。而Marp的解决方案极其聪明用Markdown负责内容用CSS控制样式两者通过YAML元数据灵活对接。实测在紧急修改场景下效率比传统工具提升至少3倍。技术创作者会特别钟爱这个工作流版本控制友好.md文件比.pptx更适合Git管理键盘流操作全程不用碰鼠标VSCode的快捷键体系全覆盖组件化思维把常用版式存为代码片段随时调用跨平台一致再也不怕Mac和Windows的字体渲染差异2. 5分钟快速搭建开发环境2.1 基础软件准备先确保你的电脑上有这两样工具VSCode到官网下载安装包建议选择System Installer版本Node.jsMarp-cli需要Node环境安装LTS版本即可装好后打开终端Windows用PowerShell或CMD运行这两个命令验证code --version node -v如果能看到版本号输出说明基础环境OK。2.2 核心插件安装在VSCode扩展商店搜索并安装Marp for VSCode作者marp-teamMarkdown All in One可选增强MD编辑体验有个容易踩的坑别装错同名插件我见过有人装了Marp Preview这个废弃项目结果死活调不出导出功能。认准marp-team官方出品安装量超过百万的那个。2.3 创建你的第一个Marp项目按CtrlShiftP调出命令面板输入mkdir my-first-marp cd my-first-marp code .这组命令会创建项目文件夹并用VSCode打开。接着新建文件slides.md我们即将在这里开启魔法。3. 从零编写第一页幻灯片3.1 激活Marp模式在空白md文件顶部插入这段YAML配置--- marp: true theme: default ---保存后点击右上角的Marp图标长得像分屏显示器选择Toggle Marp feature for current Markdown。这时右侧预览会变成幻灯片样式恭喜你已成功开启Marp宇宙3.2 构建标题页删除默认内容用一级标题创建封面# 我的AI技术分享 ## 从理论到实践的全栈指南你会发现两个标题出现在同一页这符合Markdown的常规逻辑。要让二级标题自动分页修改YAML部分--- marp: true theme: default headingDivider: 2 ---现在每个二级标题都会自动创建新页面就像PPT里的新建幻灯片快捷键。3.3 内容分页技巧除了自动分页手动控制也很重要用三个横线---强制分页前后要有空行用***或___也能实现同样效果我习惯的排版逻辑是封面用一级标题章节用二级标题自动分页同一章节内的子主题用三级标题手动分页4. 让幻灯片专业起来的进阶技巧4.1 主题与版式定制在YAML区域添加这些参数size: 16:9 paginate: true footer: © 2023 我的技术博客这设定了宽屏比例、显示页码和全局页脚。更深入的样式定制可以用CSSstyle section { background: linear-gradient(to right, #8e2de2, #4a00e0); color: white; } /style4.2 图片处理黑科技Marp对图片语法的扩展堪称一绝 第一个是普通图片尺寸调整第二个是把图片设为右侧背景。我常用这些组合bg cover全屏背景图blur:5px背景模糊效果hue-rotate:90deg色相旋转滤镜4.3 代码片段高亮作为技术分享代码演示必不可少python def hello_marp(): print(用代码说话最有力) VSCode会自动识别语言类型并高亮显示。想要更突出的效果可以加style pre { background: #282c34; border-radius: 8px; } /style5. 导出与演示实战指南5.1 多格式导出点击Marp图标选择Export slide deck你会看到四个选项PDF最通用的格式打印/投影都适用HTML适合网页嵌入或在线演示PPTX给必须用PowerPoint的场合图片序列制作视频素材时有用我通常同时生成PDF和HTML双版本PDF用于正式场合HTML版则方便在移动设备查看。5.2 演讲者模式技巧虽然Marp没有内置的演讲者视图但可以用这些方案替代双窗口法左边放VSCode编辑器右边放PDF阅读器的全屏演示HTML遥控用marp-cli生成HTML时开启--preview选项手机扫码即可遥控翻页备注功能用HTML注释写演讲备注导出时通过CSS隐藏!-- 这是只有演讲者能看到的内容 --5.3 遇到问题怎么排查这些是我踩过的典型坑和解决方案中文乱码导出PDF时在YAML添加output: html然后用浏览器打印图片不显示使用相对路径或图床链接绝对路径容易出错样式失效检查CSS语法特别是分号和花括号导出卡住关闭文件重新打开或者重启VSCode6. 效率提升的终极配置6.1 代码片段模板在VSCode中创建这些用户片段文件 首选项 用户片段{ Marp Slide: { prefix: marp, body: [ ---, marp: true, theme: default, size: 16:9, headingDivider: 2, paginate: true, ---, # ${1:标题}, , ## ${2:章节} ] } }输入marp就能快速生成幻灯片框架。6.2 自动化脚本在package.json中添加scripts: { build: marp --input-dir ./slides --output ./dist, watch: marp --watch --input-dir ./slides --output ./dist }运行npm run watch就能实时监控文件变化并自动构建。6.3 主题共享方案把常用主题保存为theme.css然后在多项目间引用--- theme: ./theme.css ---我维护了三个主题科技蓝、深色模式和学术白根据场合一键切换。从第一次接触Marp到现在我已经用它完成了87场技术分享。这个数字背后是再也不用在凌晨三点对着崩溃的PPT抓狂的解脱感。当你掌握这套工作流后制作幻灯片的体验会从不得不做变成顺手而为——就像开发者享受编码一样技术演讲者也能找到自己的心流状态。
Marp入门指南：从零到一，用Markdown在VSCode中构建你的第一份幻灯片
1. 为什么选择MarpMarkdownVSCode组合第一次听说用Markdown写幻灯片时我内心是拒绝的——直到连续熬夜改了三版PPT后才真正体会到这个组合的妙处。想象一下当你用纯文本写完内容敲个命令就能生成专业级幻灯片还能自动同步到网页、PDF、PPTX三种格式这种一次编写到处演示的体验就像发现办公室咖啡机突然能出冰美式一样惊喜。传统幻灯片工具最大的痛点在于内容与样式的强耦合。我在某次产品发布会前夜因为调整某个文本框的位置导致整个排版崩坏。而Marp的解决方案极其聪明用Markdown负责内容用CSS控制样式两者通过YAML元数据灵活对接。实测在紧急修改场景下效率比传统工具提升至少3倍。技术创作者会特别钟爱这个工作流版本控制友好.md文件比.pptx更适合Git管理键盘流操作全程不用碰鼠标VSCode的快捷键体系全覆盖组件化思维把常用版式存为代码片段随时调用跨平台一致再也不怕Mac和Windows的字体渲染差异2. 5分钟快速搭建开发环境2.1 基础软件准备先确保你的电脑上有这两样工具VSCode到官网下载安装包建议选择System Installer版本Node.jsMarp-cli需要Node环境安装LTS版本即可装好后打开终端Windows用PowerShell或CMD运行这两个命令验证code --version node -v如果能看到版本号输出说明基础环境OK。2.2 核心插件安装在VSCode扩展商店搜索并安装Marp for VSCode作者marp-teamMarkdown All in One可选增强MD编辑体验有个容易踩的坑别装错同名插件我见过有人装了Marp Preview这个废弃项目结果死活调不出导出功能。认准marp-team官方出品安装量超过百万的那个。2.3 创建你的第一个Marp项目按CtrlShiftP调出命令面板输入mkdir my-first-marp cd my-first-marp code .这组命令会创建项目文件夹并用VSCode打开。接着新建文件slides.md我们即将在这里开启魔法。3. 从零编写第一页幻灯片3.1 激活Marp模式在空白md文件顶部插入这段YAML配置--- marp: true theme: default ---保存后点击右上角的Marp图标长得像分屏显示器选择Toggle Marp feature for current Markdown。这时右侧预览会变成幻灯片样式恭喜你已成功开启Marp宇宙3.2 构建标题页删除默认内容用一级标题创建封面# 我的AI技术分享 ## 从理论到实践的全栈指南你会发现两个标题出现在同一页这符合Markdown的常规逻辑。要让二级标题自动分页修改YAML部分--- marp: true theme: default headingDivider: 2 ---现在每个二级标题都会自动创建新页面就像PPT里的新建幻灯片快捷键。3.3 内容分页技巧除了自动分页手动控制也很重要用三个横线---强制分页前后要有空行用***或___也能实现同样效果我习惯的排版逻辑是封面用一级标题章节用二级标题自动分页同一章节内的子主题用三级标题手动分页4. 让幻灯片专业起来的进阶技巧4.1 主题与版式定制在YAML区域添加这些参数size: 16:9 paginate: true footer: © 2023 我的技术博客这设定了宽屏比例、显示页码和全局页脚。更深入的样式定制可以用CSSstyle section { background: linear-gradient(to right, #8e2de2, #4a00e0); color: white; } /style4.2 图片处理黑科技Marp对图片语法的扩展堪称一绝 第一个是普通图片尺寸调整第二个是把图片设为右侧背景。我常用这些组合bg cover全屏背景图blur:5px背景模糊效果hue-rotate:90deg色相旋转滤镜4.3 代码片段高亮作为技术分享代码演示必不可少python def hello_marp(): print(用代码说话最有力) VSCode会自动识别语言类型并高亮显示。想要更突出的效果可以加style pre { background: #282c34; border-radius: 8px; } /style5. 导出与演示实战指南5.1 多格式导出点击Marp图标选择Export slide deck你会看到四个选项PDF最通用的格式打印/投影都适用HTML适合网页嵌入或在线演示PPTX给必须用PowerPoint的场合图片序列制作视频素材时有用我通常同时生成PDF和HTML双版本PDF用于正式场合HTML版则方便在移动设备查看。5.2 演讲者模式技巧虽然Marp没有内置的演讲者视图但可以用这些方案替代双窗口法左边放VSCode编辑器右边放PDF阅读器的全屏演示HTML遥控用marp-cli生成HTML时开启--preview选项手机扫码即可遥控翻页备注功能用HTML注释写演讲备注导出时通过CSS隐藏!-- 这是只有演讲者能看到的内容 --5.3 遇到问题怎么排查这些是我踩过的典型坑和解决方案中文乱码导出PDF时在YAML添加output: html然后用浏览器打印图片不显示使用相对路径或图床链接绝对路径容易出错样式失效检查CSS语法特别是分号和花括号导出卡住关闭文件重新打开或者重启VSCode6. 效率提升的终极配置6.1 代码片段模板在VSCode中创建这些用户片段文件 首选项 用户片段{ Marp Slide: { prefix: marp, body: [ ---, marp: true, theme: default, size: 16:9, headingDivider: 2, paginate: true, ---, # ${1:标题}, , ## ${2:章节} ] } }输入marp就能快速生成幻灯片框架。6.2 自动化脚本在package.json中添加scripts: { build: marp --input-dir ./slides --output ./dist, watch: marp --watch --input-dir ./slides --output ./dist }运行npm run watch就能实时监控文件变化并自动构建。6.3 主题共享方案把常用主题保存为theme.css然后在多项目间引用--- theme: ./theme.css ---我维护了三个主题科技蓝、深色模式和学术白根据场合一键切换。从第一次接触Marp到现在我已经用它完成了87场技术分享。这个数字背后是再也不用在凌晨三点对着崩溃的PPT抓狂的解脱感。当你掌握这套工作流后制作幻灯片的体验会从不得不做变成顺手而为——就像开发者享受编码一样技术演讲者也能找到自己的心流状态。
