代码转图片工具

在线把代码渲染成精美图片,支持多种主题配色、字体、窗口样式和内外边距,适合分享代码片段,导出 PNG,纯本地生成。

功能介绍

代码转图片工具可以把您输入的代码转换为美观的带语法高亮的图片,支持多种主题配色、字号和内边距调节,可直接下载PNG图片用于分享、文档或博客。

使用方法

  1. 在代码输入框中粘贴或输入您需要转换的代码
  2. 选择主题配色,调整字号、内边距,可选择是否显示Mac风格窗口标题栏
  3. 点击「生成图片」按钮,即可在结果区预览生成的图片
  4. 点击「下载PNG」按钮即可保存图片到本地

实现原理

工具采用SVG内嵌HTML实现DOM转Canvas,流程如下:

  1. 根据选择的主题和配置,创建临时的DOM容器,渲染带语法高亮的代码
  2. 将DOM转换为SVG的foreignObject,再转换为图片
  3. 绘制到Canvas上,输出PNG供预览和下载
语法高亮采用简单正则匹配,支持关键词、字符串、注释三种语法元素着色。

注意事项

生成的图片清晰度不够怎么办?

工具默认会根据设备屏幕DPI自动缩放,保证清晰度。如果您需要更清晰的图片,可以尝试调小字号增加内容密度,或使用系统自带的图片放大工具处理。

为什么我的代码高亮不对?

本工具采用简单的正则匹配做语法高亮,只支持常见关键词、字符串、注释的高亮,复杂语法或者冷门编程语言可能无法正确高亮,仅适用于简单代码展示。

可以生成没有窗口标题栏的图片吗?

可以,取消勾选「显示 Mac 风格窗口标题栏」选项即可生成纯代码区域的图片。

支持哪些编程语言?

由于采用通用关键词匹配,对大多数常见编程语言(JavaScript、Python、Java、C++等)都能有基础的高亮效果,不区分语言。