news 2026/9/26 9:53:38

14 天 Markdown 实战入门(VS Code 版)-- 第 13 章:导出与发布:HTML / PDF / Word、静态站点、GitHub

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
14 天 Markdown 实战入门(VS Code 版)-- 第 13 章:导出与发布:HTML / PDF / Word、静态站点、GitHub

系列名:《从 0 到 1:14 天 Markdown 实战入门(VS Code 版)》
更新节奏:每天 1 章,共 14 章
本章难度:⭐⭐⭐☆☆
本章关键词:导出、PDF、HTML、Word、Pandoc、GitHub、静态站点、发布

1. 本章导读

前面十二章,我们一直在“写” Markdown。但写完之后呢?

Markdown 只是源文件,最终你要把它变成可交付的成果:

  • 发给同事的 PDF 文档。
  • 提交给客户的 Word 文件。
  • 发布到 GitHub 的 README。
  • 部署到网上的博客文章。
  • 导出为 HTML 的在线文档。

这一章我们要解决 Markdown 的“最后一公里”:导出与发布。

你会学到:

  • 如何把 Markdown 导出为 HTML。
  • 如何打印为 PDF。
  • 如何用 Markdown Preview Enhanced 导出多种格式。
  • 如何用 Pandoc 转换文档。
  • 如何写 GitHub README。
  • 如何把 Markdown 发布到静态博客。
  • 一个完整的导出与发布流程。

2. 学习目标

完成本章后,你应当能够:

  • 使用 VS Code 导出 HTML。
  • 使用浏览器打印为 PDF。
  • 使用 Markdown Preview Enhanced 导出 PDF、HTML、PNG、EPUB。
  • 了解 Pandoc 的基本用法。
  • 写规范的 GitHub README。
  • 理解静态站点生成器的工作流程。
  • 把 Markdown 发布到 GitHub Pages。
  • 完成从写作到发布的完整流程。
  • 识别并解决导出中的常见问题。

3. 理论讲解

3.1 导出格式概览

Markdown 可以导出为多种格式:

格式用途工具
HTML网页、在线文档VS Code、MPE、Pandoc
PDF打印、正式文档浏览器、MPE、Pandoc
Word协作、交付Pandoc、Typora
PNG图片分享MPE、Mermaid Live
EPUB电子书Pandoc、MPE
PPT演示Pandoc、Marp
Markdown源文件本身

选择建议:

  • 发给同事:PDF 或 Word。
  • 发布网站:HTML 或静态站点。
  • 开源项目:GitHub README。
  • 电子书:EPUB 或 PDF。
  • 演示:Marp 或 PPT。

3.2 VS Code 内置导出 HTML

VS Code 内置预览可以导出 HTML。

步骤:

  1. 打开 Markdown 文件。
  2. 打开预览:Ctrl + Shift + V/Cmd + Shift + V。
  3. 在预览中右键,选择“复制为 HTML”或“打印”。
  4. 或使用命令面板:
Markdown: Print Current Document to HTML

注意:

  • 内置导出功能有限。
  • 样式比较简单。
  • 复杂公式、Mermaid、代码高亮可能丢失。
  • 适合简单文档。

3.3 浏览器打印为 PDF

最简单的方式:

  1. 打开 Markdown 预览。
  2. 在预览中右键,选择“在浏览器中打开”。
  3. 浏览器中按Ctrl + P/Cmd + P。
  4. 选择“另存为 PDF”。
  5. 调整页面设置。

优点:

  • 不需要额外工具。
  • 样式相对可控。
  • 支持大部分 Markdown 语法。

缺点:

  • 分页不精确。
  • 代码块可能被截断。
  • 公式和 Mermaid 可能丢失。

3.4 Markdown Preview Enhanced 导出

Markdown Preview Enhanced 是导出功能最强大的插件之一。

支持导出:

  • HTML
  • PDF
  • PNG
  • JPEG
  • EPUB
  • Pug
  • Pandoc
  • 电子书

步骤:

  1. 打开增强预览:
Markdown Preview Enhanced: Open Preview
  1. 在预览中右键,选择“Export”。
  2. 选择目标格式。

导出 PDF:

Markdown Preview Enhanced: Chrome (Puppeteer) -> PDF

导出 HTML:

Markdown Preview Enhanced: HTML -> HTML

导出 PNG:

Markdown Preview Enhanced: Chrome (Puppeteer) -> PNG

3.5 配置 Markdown Preview Enhanced 导出

导出 PDF 配置示例:

{"markdown-preview-enhanced.chromeExecutablePath":"","markdown-preview-enhanced.puppeteer":{"args":["--no-sandbox"]},"markdown-preview-enhanced.pdf":{"format":"A4","printBackgro
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/26 9:52:49

Linux 7.4内核HDMI升级:FreeSync VRR与ALLM底层支持全解析

说实话,Linux桌面显示这一块,前几年一直给我一种“能用但不够爽”的感觉。玩游戏掉帧撕裂、外接显示器偶尔黑屏、想开自适应刷新率还得翻遍内核参数和驱动文档,折腾半天还不一定成功。这次Linux 7.4内核把HDMI功能整体升级了一轮,…

作者头像 李华
网站建设 2026/9/26 9:51:40

BL440工业ARM计算机:多协议融合+硬实时+边缘AI一体化平台

1. BL440不是概念玩具,是工业现场能扛住震动、高温和电磁干扰的“硬核大脑”BL440这个型号名乍看像某款消费级芯片编号,但只要你拆开它的金属外壳,摸到那块带散热鳍片的aarch64主控板,闻到PCB上焊点散发的淡淡松香味,你…

作者头像 李华
网站建设 2026/9/26 9:51:33

IEC61850实战:GOOSE与SMV报文解析及TaoToken配置验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/26 9:51:29

Figma 配置 TaoToken:settings.json 骨架与报错排查

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/26 9:51:28

把OpenClaw塞进ESP32-S3:搭建低成本常驻AI智能体完整指南

1. 先说结论:把OpenClaw塞进ESP32-S3,究竟图什么OpenClaw这个词最近在智能体圈子里刷屏,说白了它是一个开源的、可以常驻在线、能对接各种聊天平台的个人AI智能体框架。而ESP32-S3是一颗带Wi-Fi和BLE的双核MCU,价格便宜到可以当消…

作者头像 李华
网站建设 2026/9/26 9:50:19

Modbus RTU与TCP本质区别:物理层到应用层的全栈解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华