代码截图生成器

把代码变成语法高亮的图片，还能一键复制

加载中…

这个工具有帮助吗？

关于此工具

把代码粘贴进来,就能得到语法高亮的图片。工具提供 9 种主题、渐变或透明背景、macOS 与 Windows 窗口装饰、行号以及指定行高亮,做好的图片可以下载,也能直接复制到剪贴板贴进 Slack 或博客。屏幕上的预览就是导出的图片本身,下载后不会有落差。

使用方法

  1. 粘贴代码。工具会根据内容和文件名自动判断语言。
  2. 选择主题和背景,再调整留白与字号。
  3. 想强调某些行,按 3,5-7 这样的格式填写。
  4. 点击复制图片,或以 1x、2x、3x 下载 PNG。

常见问题

2x、3x 是什么意思?
就是把同一张图按两倍、三倍分辨率绘制。视网膜屏幕或演示幻灯片这类要放大看的场合适合 2x 以上,放进博客正文 1x 就够了。字号不变,只是像素更密。
复制图片没反应。
说明浏览器不支持把图片写入剪贴板,部分 Safari 版本和较老的浏览器就是这样。这种情况请改用 PNG 下载。
中文注释显示不正常。
所选字体不含中文。JetBrains Mono 和 Fira Code 只覆盖拉丁字符,中文会退回到系统字体。中文较多的代码建议选择系统等宽字体。
分享链接里包含什么?
代码和全部设置都编码在网址 # 之后。浏览器不会把这部分发送给服务器,所以不会出现在访问日志里,但链接本身确实含有代码,请不要分享机密内容。
为什么是直接绘制而不是截屏?
截屏方案在各家浏览器里的渲染结果并不一致,而且如果网页字体还没加载完就截,字体会整个变样。直接画在画布上,任何浏览器打开都是同一张图。

代码只在浏览器内处理,不会发送到服务器。语法规则和主题按需下载,所以第一次选择某种语言或主题时可能要稍等片刻。

类似工具