★ FEATURED ARTICLE Marp 幻灯片指南如何用一份 Markdown 文件搞定演示文稿的写作、美化与多格式导出【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址: https://gitcode.com/gh_mirrors/mar/marp还在 PPT 软件里拖文本框、调字号、对齐色块吗Marp走的是另一条路把整份 Markdown 演示文稿还原成一个.md文件改内容像写文档一样快换皮肤像改 CSS 一样直观最后一条命令就能转成 HTML、PDF 或 PPTX。这篇指南带你从第一页幻灯片写到最终导出全部基于纯文本不碰任何图形拖拽。先说场景你的幻灯片还藏在 PPT 的格式陷阱里吗日常做演示文稿你大概率遇到过这些情况想改一个标题的颜色得先找到文本框再翻三层菜单同事发来的 PPT 在你机器上排版全乱字体也没了演讲稿迭代了三版diff 全是二进制噪音没法进 Git 对比。Marp 的思路是把幻灯片当成一份纯文本内容就写在 Markdown 里页面之间用一条分隔线切开。这样带来的直接好处是改一行字保存即生效整套文稿放进仓库版本历史和协作审查都是现成的同一份源文件按需输出网页版、打印版或 Office 版。你不需要放弃对画面的控制——Marp 的样式层就是标准 CSS后面会细讲。Marp 生态怎么分家Marpit、Marp Core 与 Marp CLI 各管一摊Marp 不是一坨单体软件而是分成三个可以单独取用的部分Marpit负责Markdown 怎么变成一页页幻灯片这件事本身——按分隔符切页、解析指令、处理图片语法这类骨架功能都出自它Marp Core在骨架之上加入成品能力比如内置主题、公式渲染、GFM 增强语法Marp CLI转换器外壳把前两者的能力接到你的命令行负责产出 HTML、PDF、PPTX 和图片文件。打个比方这像一条流水线Marpit 是传送带Marp Core 是加工工序Marp CLI 是打包出货口。因为各层独立你既可以用 CLI 直接干活也能在自己的 Node.js 项目里只引 Core 做定制。选一条上手路线命令行直转或 VS Code 边写边看Marp 提供两种使用姿势按你的习惯挑Marp for VS CodeMarp CLI编辑器只用 VS Code任意编辑器vim、Web 都行实时预览有有导出方式点按钮敲命令用插件不支持支持Marp for VS Code适合不想碰终端的人装好扩展、打开 Markdown 文件就能看效果。Marp CLI适合批量处理、接 CI、管道串联以及需要挂插件的场景。命令行一条 npx 命令出活只要装了 Node.js 12不安装任何全局包也能试水npx marp-team/marp-clilatest markdown.md想长期用macOS 上brew install marp-cli、Windows 上scoop install marp都只有一行也提供独立二进制和 Docker 官方镜像。注意导出 PDF 或 PPTX 时本机要有 Chrome、Edge 等 Chromium 内核浏览器参与渲染。编辑器装上扩展就能实时预览在 VS Code 里安装Marp for VS Code扩展新建一个.md文件点编辑器工具栏上的 Marp 图标Toggle Marp feature for current Markdown它会在文件头部帮你插好声明然后打开 Markdown 预览就开始写幻灯片。写第一张幻灯片声明启用、分隔符切页与内置语法增强在任意.md文件开头加三行它就成为 Marp 文稿--- marp: true ---之后的规则很朴素切页写一条分隔线---不想处理空行时可改用***、___或- - -每切一次就是一页兼容Marp 基于 CommonMark 标准只往上加东西不删改——你写的文件在任何 Markdown 编辑器里都读得懂增强段落里的回车自动换行表格、emoji 短码、删除线、URL 自动链接、代码高亮等 GitHub 风格语法开箱即用安全大部分 HTML 标签默认禁用只放行style和br/两个标签想开更多需要显式配置。第一页写个一级标题和一行副标题保存预览里你已经有一张能看的幻灯片了。指令Directives速查页码、背景、页眉页脚都靠它Marp 在 Markdown 之外加了一套叫Directives指令的开关写法就是 YAML放在文档开头的 front matter 里或者写在任意一页的 HTML 注释中!-- theme: default paginate: true --指令分两种粒度全局指令管整份文稿。如theme主题、size页面尺寸、math公式引擎、title/author/description元信息等单页指令管某一页。如paginate页码、header/footer页眉页脚、backgroundImage/backgroundColor背景、color文字色等。 单页指令有个容易忽略的机制它会向下继承。在第三页设了背景色第四页没写就会跟着用。想让某个值只作用于当前页在指令名前加下划线例如_color: blue——这一页变蓝下一页自动回到继承的颜色。几个实用技巧想让页码从第二页才开始把paginate: true移到第二页声明即可header/footer的内容里可以写行内 Markdown加粗、图片都行YAML 里记得用引号包起来中途想撤掉页眉页脚把值写成空字符串就能重置。主题系统与 CSS换肤、注入样式、公式排版Marp 坚持内容与样式分离你只管写内容长什么样交给 主题 决定。换主题front matter 里写theme: 主题名。官方主题分亮色和暗色两套深浅切换就改一个词改样式只要你写过网页 CSS就能改幻灯片。style全局指令可以注入一段 CSS 微调主题细节单页想临时改直接在该页写一个style块公式支持 Pandoc 风格数学排版——$...$写行内公式$$...$$写居中公式块。默认用 MathJax 渲染也可通过math: katex指令切到 KaTeX建议在 front matter 里显式声明引擎避免不同版本渲染结果漂移。也就是说主题在 Marp 里不是什么黑盒皮肤就是一套 CSS——你会改样式就等于会做主题。把存量文档变成幻灯片headingDivider 按标题级别自动切页手上已经有一篇结构完整的 Markdown 长文不想一页页手工切heading divider 指令帮你自动分页!-- headingDivider: 2 --这行指令告诉 Marp遇到二级标题就开新页一级标题同样触发。某节内容太多溢出一页就把级别调到 3让它按三级标题切想要完全精确的控制可以传数组例如headingDivider: [1, 3]只在一级和三级标题处分页。原有的---分隔符依然有效两种方式可以混用。这是把写文档和做演讲合一的捷径同一份源稿日常是文档需要汇报时加一行指令就是幻灯片。批量导出幻灯片Marp CLI 转 HTML / PDF / PPTX 与碎片化列表写完之后交给 Marp CLI 统一出货。几种输出的定位不同HTML可以发到网上保留交互内容比如逐条出现的列表PDF任何能放 PDF 的环境都能放映离线场景首选官方也推荐这是最简单的放映方式PPTX要进 PowerPoint 手工补内容的场合用图片按页产出 PNG/JPEG适合分享单页截图。Marp 刻意追求跨格式渲染一致——同一页内容HTML、PDF、PPTX 里看起来应该是一样的你不用为某个格式单独修版式。两个值得知道的细节碎片化列表用*开头的无序列表、1)形式的有序列表在 HTML 输出里会逐条淡入控制观众注意力导出 PDF/PPTX 时它们就显示为完整列表。接自动化CLI 可以批处理一整个目录、配合管道和重定向也支持通过配置文件传高级选项直接塞进 CI 流水线做服务端转换。VS Code 写幻灯片实时预览、诊断与大纲面板如果选了扩展路线Marp for VS Code 除了实时预览还给你三件顺手的事指令补全写!-- the时自动提示theme、title等指令名不用背拼写诊断指令写错、主题名不存在编辑器里直接标出来侧边栏大纲左侧面板列出整份文稿的页面结构长文稿里跳页、整理顺序比翻文件快得多。改完即导出扩展内置导出命令PPTX 或 PDF 直接落盘拿去接着在 PowerPoint 里补内容或者直接开投。装插件、接 CI把 Marp 嵌进自己的管线到这里你已经跑通了写 → 美化 → 导出的主线。剩下的是把 Marp 变成你自己的基础设施挂插件Marp CLI 基于 Marpit 的可插拔架构可以接 markdown-it 插件加新语法、自定义指令、塞入自己的主题集团队流水线把导出命令接进 CI文档合并后自动产出最新 PDF 放进发布物评审和归档都不用人工跑一遍参与上游这个仓库Marp 生态的入口仓库采用 Yarn workspaces 组织官方站点用 Next.js 13 TypeScript Tailwind CSS 构建以 MIT 协议开源文档 里的每一篇都欢迎补全和纠错。下一步可以做的具体三件事给自己挑一套主题在style指令里写几行 CSS 把它改成你的团队配色给一个真实项目把导出接进 CI最后把这次做的幻灯片仓库化让下次的 diff 只留下你真正改的内容。【免费下载链接】marpThe entrance repository of Markdown presentation ecosystem项目地址: https://gitcode.com/gh_mirrors/mar/marp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
