企业官网建设流程全解析

Marp for VS Code 实战指南：在 VS Code 里用 Markdown 写幻灯片，5分钟导出 PDF 与 PPTX

【免费下载链接】marp-vscodeMarp for VS Code: Create slide deck written in Marp Markdown on VS Code项目地址: https://gitcode.com/gh_mirrors/ma/marp-vscode

Marp for VS Code 是一个 VS Code 扩展：用 Markdown 写演示文稿，边写边看实时幻灯片效果，还能一键导出 PDF、PPTX、HTML 和图片。本文带你从零走完一次完整的做片流程。

做幻灯片的痛：拖来拖去，不如直接写

周五晚上赶一份技术分享材料。打开 PowerPoint，先拖文本框、调对齐、换配色，内容一改排版就得重来；想换份材料又得重头搭。

其实幻灯片的内容本来就是文字：标题、要点、代码、公式。能不能像写文档一样写幻灯片，用纯文本描述每一页，改内容时还能正常走 Git 版本管理和代码评审？这正是 Marp 生态要解决的事——用 Markdown 语法描述幻灯片。

Marp for VS Code：把 Markdown 文件变成幻灯片编辑器

Marp for VS Code 是 Marp 团队出品的官方 VS Code 扩展（MIT 协议）。它不需要独立的预览软件：在任意 Markdown 文件开头声明一行marp: true，就会复用 VS Code 自带的 Markdown 预览来渲染幻灯片效果。

装上之后，它能给你五样东西：

• 实时幻灯片预览：和普通 Markdown 预览用同一组快捷键打开，光标在哪一页，预览就高亮哪一页
• 指令智能补全与诊断：theme、size、paginate等指令有自动补全、语法高亮、悬停说明，还能检查未知主题、无效尺寸等问题
• 一键导出：HTML、PDF、PPTX、PNG/JPEG（仅首页）、TXT（仅备注）六种格式
• 自定义主题：把团队的主题 CSS 注册进设置，本地 CSS 修改后预览自动刷新
• 页面级大纲与折叠：大纲面板按幻灯片分页列出结构，编辑器里可以折叠单页内容

快速上手：5 分钟看到自己的第一张幻灯片

1. 在 VS Code 扩展面板搜索 “Marp for VS Code”（发布者 marp-team），安装。
2. 新建一个 Markdown 文件，在文件最顶部写入下面这段声明：

--- marp: true --- # 我的第一张幻灯片

3. 保存，按Ctrl+Shift+V打开预览。左边继续写，右边实时渲染，已经是幻灯片样式了。
4. 以后想做新幻灯片，不用手动敲声明：在 “New File...” 菜单里选 “Marp Markdown”（快捷键Alt+Ctrl+Win+N），会直接生成一个带好marp: true的文件。

四个值得掌握的核心能力

实时预览 + 大纲导航：长文档也能理清页码

预览的打开方式与内置 Markdown 预览完全一致，差异在于它按---分隔符把文档切成一页页幻灯片，并根据编辑器光标位置高亮当前页。

文档写到几十页时，打开 VS Code 的大纲面板，Marp 会按页生成结构，点哪页跳哪页。如果页面顺序显示不对，在大纲面板右键选 “Sort By: Position” 即可。

不用背指令：补全、高亮和诊断替你把关

Marp 靠指令控制幻灯片外观，写在 front-matter 或 HTML 注释里。记不住很正常，扩展帮你记：

• 在 front-matter 里按Ctrl+Space，列出可用指令；再按一次，查看选中指令的帮助
• 已识别的指令 key 会着色显示，鼠标悬停能看到说明
• 诊断功能会主动报错：主题名写错（unknown-theme）、尺寸预设不存在（unknown-size）、废弃的$前缀写法等，部分问题直接给快速修复

具体规则可以看诊断模块源码。得到什么：写错当场就被标记，而不是导出后才发现。

一键导出：PDF、PPTX、HTML 一次搞定

能力：扩展内置了 Marp CLI，导出走的是它。

怎么做：点工具栏的 Marp 图标，选 “Export slide deck...”；或者用命令面板（F1）搜同名命令。默认格式由markdown.marp.exportType设置控制。注意 PDF、PPTX 和图片格式需要本机装有 Chrome、Chromium、Edge 或 Firefox 之一作为渲染引擎。

得到什么：导出物可以直接投屏或分发，不用再开 Office。HTML 版本还带演讲者视图、片段列表等能力。实现细节可看导出命令源码。

自定义主题：一个 CSS 文件统一团队风格

能力：用markdown.marp.themes注册主题 CSS，支持远程 URL 和工作区内的相对路径。

怎么做：写一个主题文件，声明@theme名称，再在设置里注册：

/* themes/company.css */ /* @theme company */ @import 'default'; section { background: #007acc; color: #fff; }

幻灯片里写theme: company即可生效。本地 CSS 修改并保存后，预览自动刷新，不用重启，调试主题很方便。注册逻辑见自定义主题插件。

得到什么：团队所有人引用同一份 CSS，整套幻灯片的配色和字体就统一了。

📄 一次完整流程：从空白文件到投屏演示

我用它做一场 30 分钟的技术分享，全程没离开编辑器：

1. 工具栏选 “Marp Markdown” 生成新文件，模板已带marp: true；
2. 写指令全靠Ctrl+Space补全，front-matter 里设置size: 16:9、paginate: true，正文插入代码块和$$...$$公式（渲染库由markdown.marp.mathTypesetting选 mathjax 或 katex）；
3. 内容越写越长，把没整理的页面用编辑器折叠标记收起来，需要时再展开；
4. 靠大纲面板核对页面顺序，内容太挤的那页直接删减；
5. 最后把默认导出格式设为 PDF，点 “Export slide deck...”，文件生成后自动打开，直接投屏收工。

⚙️ 可直接复制的配置与四个常见坑

工作区.vscode/settings.json里这样配，覆盖最常用的项：

// .vscode/settings.json { "markdown.marp.exportType": "pdf", "markdown.marp.exportAutoOpen": true, "markdown.marp.themes": ["./themes/company.css"], "markdown.marp.mathTypesetting": "katex", "markdown.marp.browserPath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" }

常见坑，按“现象 → 原因 → 解决”排好：

1. 预览还是普通 Markdown，没有幻灯片效果原因：marp: true不在文件最顶部的 front-matter 里，Marp 功能没启用。 解决：把它移到文件最前面，前后各留一行---；或点工具栏选 “Toggle Marp feature for current Markdown”。
2. 导出 PDF/PPTX/图片提示找不到浏览器原因：这些格式要借助本机浏览器渲染，自动探测没找到。 解决：装 Chrome、Chromium、Edge 或 Firefox 之一；路径特殊时用markdown.marp.browserPath手动指定。
3. 自定义主题不生效原因：CSS 没注册，或幻灯片里写的主题名和 CSS 里的@theme名对不上。 解决：核对markdown.marp.themes里的路径；核对theme指令与@theme声明是否同名；还不行就重启编辑器。
4. 中文显示成系统默认字体，和主题不搭原因：主题 CSS 没指定中文字体。 解决：在主题 CSS 的section里设置font-family，写上系统里实际存在的中文字体。
5. 大纲里的页面顺序不对原因：大纲面板当前按其他规则排序。 解决：在大纲面板右键选 “Sort By: Position”。

迈出第一步

如果你平时就在 VS Code 里写文档，下一篇技术分享不妨直接换成 Marp Markdown：纯文本、可评审、可导出，做片和改稿都在同一个窗口完成。想深入看扩展本身怎么实现的，仓库在 https://gitcode.com/gh_mirrors/ma/marp-vscode ，clone 下来从 src/extension.ts 入口读起即可。

【免费下载链接】marp-vscodeMarp for VS Code: Create slide deck written in Marp Markdown on VS Code项目地址: https://gitcode.com/gh_mirrors/ma/marp-vscode