sublime text 本身不支持直接导出精美代码截图,所有方案均依赖插件或外部工具组合实现;copy as html 仅输出无样式片段,exporthtml 可导出带主题、行号、阴影的 html,但需手动配置并借助浏览器截图才能生成 png。

Sublime Text 本身不支持直接导出带高亮、字体渲染和阴影的“精美截图”,所谓“导出代码截图”实际是组合外部工具或插件实现的伪截图流程,核心靠的是「复制为 RTF/HTML + 粘贴到支持渲染的软件」或「调用系统截图工具配合精心配色的主题与字体」。
为什么 Copy as HTML 导出的 HTML 打开后不美观?
Sublime Text 原生的 Copy as HTML(需安装 Package Control 后通过命令面板调用)只生成极简 HTML 片段,不含 CSS 样式表、无行号对齐、默认用等宽字体但不嵌入字体文件,浏览器打开后易出现:字体回退成 Courier、背景色丢失、关键字颜色变淡、行号错位。
- 必须手动把
sublime-text-<version>/Packages/Color Scheme - Default/</version>下当前主题的 .tmTheme 文件转成 CSS(可用在线工具如 sublime-to-vscode 辅助),再注入 HTML head 中 -
Copy as HTML不保留缩进空格宽度,Tab 会被转成单个空格 —— 若需精准对齐,得先在设置里设"translate_tabs_to_spaces": true并统一用空格缩进 - 导出前务必关闭
word_wrap,否则换行符会破坏代码结构
用 ExportHtml 插件导出带样式的 HTML 更靠谱吗?
是的,ExportHtml 是目前 Sublime Text 上最接近“一键导出可分享代码图”的方案,它能自动提取当前视图的主题、字体、字号、行号、边框、甚至添加阴影和圆角,但仍有硬性限制:
- 必须提前配置
export_html.sublime-settings:关键项包括"html_class_name"(避免 CSS 冲突)、"include_line_numbers"(设为true才显示)、"wrap_long_lines"(建议false,否则截图会拉长) - 导出的 HTML 默认用系统字体(如 macOS 的
"SF Mono"、Windows 的"Consolas"),若目标设备没装对应字体,会降级 —— 解决办法是加@font-face或改用 Web 安全字体如"SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace" - 阴影和圆角仅在浏览器中生效,直接另存为 PNG 仍是白底灰字 —— 真正要“截图”,得用浏览器打开后按
Cmd+Shift+4(macOS)或Snip & Sketch(Win10+)截取渲染后的区域
想直接保存为 PNG?绕不开 screen capture 类插件
Sublime Text 没有内置截图 API,ScreenShot 或 SublimeCodeIntel 附带的截图功能早已停止维护且不兼容 ST4。目前唯一稳定路径是:用 Puppeteer 或 Playwright 启动无头 Chrome,加载 ExportHtml 输出的 HTML,截取 viewport 区域并保存为 PNG。
- 需要本地装 Node.js,并运行类似脚本:
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('file:///path/to/exported.html'); await page.screenshot({ path: 'code.png', fullPage: true }); await browser.close(); })(); - 注意
fullPage: true会导致长代码截图过长,更适合设clip: {x: 0, y: 0, width: 800, height: 600}截固定区域 - 导出前建议在 Sublime 中临时放大字体(
view.settings().set('font_size', 16)),否则截图文字过小;导出完记得调回原值
真正卡住多数人的不是操作步骤,而是误以为“导出”等于“自动成图”。Sublime Text 的定位是编辑器,不是演示工具 —— 所有“精美截图”本质都是主题 + 字体 + 渲染环境 + 截图动作四者严丝合缝的结果,缺一不可。最容易被忽略的是:不同系统下字体度量差异会让同一份 HTML 在 macOS 和 Windows 上行高不一致,导致截图时底部裁切或留白异常。











