F 导出 HTML 和 PDF

F-1 导出 PDF

我想实现什么： 把幻灯片保存为 PDF 文件，方便分享和打印。

操作步骤：

  1. 在 VS Code 里打开 .md 文件
  2. 按 Ctrl+Shift+P（Mac：Cmd+Shift+P）打开命令面板
  3. 输入 Marp，选择 Marp: Export Slide Deck…
  4. 在保存对话框中选择 .pdf 格式
  5. 选择保存位置，点击保存
  6. 等待几秒（进度条在底部状态栏显示）

PDF 的优点：

  • 本地图片会被嵌入，发一个文件就够
  • 任何设备都能打开，不需要插件
  • 字体和排版完全固定

常见问题：

  • 导出后打开 PDF，图片不见了 → 图片路径有误，重新检查相对路径
  • 导出很慢，一直等 → 正常，特别是第一次使用时 Marp 会下载 Chromium
  • 导出报错 → 重启 VS Code 后再试

批量导出（命令行方式）：

如果你安装了 Node.js，可以在终端里用命令行导出：

npx @marp-team/marp-cli slides.md --pdf

F-2 导出 HTML

我想实现什么： 把幻灯片保存为 HTML 文件，可以在浏览器里展示。

操作步骤：

和导出 PDF 完全一样，只是在保存对话框里选 .html 格式。

HTML 的优点：

  • 可以在浏览器里展示，支持鼠标点击翻页
  • 文件通常比 PDF 小
  • 可以放到网站上

HTML 的注意事项：

  • 本地图片不会嵌入 HTML（这是最大的坑）
  • 如果幻灯片有本地图片，分享时必须连图片文件夹一起发
  • 详见 F-3

导出带嵌入图片的 HTML（实验性功能）：

Marp CLI 可以用 --html 配合 --allow-local-files 导出嵌入图片的 HTML：

npx @marp-team/marp-cli slides.md --html --allow-local-files

注意：这个功能在 VS Code 插件里不一定支持，命令行方式更可靠。

F-3 HTML 分享时图片不见了

我想实现什么： 搞清楚为什么发出去的 HTML 里图片消失了，以及怎么解决。

原因：

Marp 导出的 HTML 文件里，图片是用路径引用的：

<img src="./Fig/chart.png">

这个路径只在你的电脑上有效。对方拿到 HTML 文件后，他们的电脑上没有 ./Fig/chart.png，所以图片消失。

解决方案一：发整个文件夹（推荐）

my_slides/          ← 把这整个文件夹压缩成 zip 发出去
├── slides.html
└── Fig/
    ├── chart.png
    └── diagram.png

对方解压后，在自己电脑上打开 slides.html，图片就能显示。

解决方案二：用图床代替本地图片

把图片上传到图床，用网络链接替代本地路径：

![](https://your-image-host.com/chart.png)

这样 HTML 文件单独发出去也能显示图片（需要网络）。

解决方案三：直接发 PDF

本地图片 + PDF 是最省心的组合。如果只是发给别人查看，不需要 HTML。

决策建议：

我要分享幻灯片
├── 给别人查看 → PDF（最省心）
├── 在网站上展示 + 图片不多 → 图床 + HTML
└── 在网站上展示 + 不想折腾图床 → 压缩文件夹 + HTML

F-4 图床基本思路

我想实现什么： 了解图床是什么，以及什么时候值得用。

图床是什么：

图床是一种在线图片存储服务。你把图片上传上去，它给你一个公开可访问的链接。在 Marp 里用这个链接替代本地路径：

<!-- 本地路径 -->
![](./Fig/chart.png)

<!-- 图床链接 -->
![](https://i.imgur.com/xxxxx.png)

用了图床之后，任何设备、任何地方打开这份幻灯片（PDF 或 HTML），都能看到图片——只要有网络。

常用图床对比：

服务 费用 稳定性 适合场景
GitHub + jsDelivr 免费 高 长期使用，技术用户
Cloudflare Images 付费 很高 重要项目
SM.MS 免费（有限额） 中 临时测试
阿里云 OSS 付费 很高 商业使用
微博/公众号图片 免费 低 不推荐，链接会失效

什么时候值得用图床：

  • 你有持续在线分享幻灯片的需求
  • 你的幻灯片需要发布到网站上
  • 你需要多人协作，大家都能看到图片
  • 你的图片数量少，上传不麻烦

什么时候不需要：

  • 你只是偶尔发 PDF 给别人
  • 你的幻灯片只在自己电脑上用
  • 你是初学阶段，不想增加工作量

推荐的 GitHub 图床工作流（简版）：

  1. 在 GitHub 上建一个仓库，专门用来存图片
  2. 把图片上传到这个仓库
  3. 用 jsDelivr 生成 CDN 链接：https://cdn.jsdelivr.net/gh/用户名/仓库名@main/图片名.png
  4. 在 Marp 里用这个链接
提示词

帮我介绍如何在 GitHub 上建立一个图床仓库，并用 jsDelivr 生成图片链接。要求步骤简洁，面向没有 GitHub 使用经验的初学者。