功能介绍
代码转图片工具可以把您输入的代码转换为美观的带语法高亮的图片,支持多种主题配色、字号和内边距调节,可直接下载PNG图片用于分享、文档或博客。
使用方法
- 在代码输入框中粘贴或输入您需要转换的代码
- 选择主题配色,调整字号、内边距,可选择是否显示Mac风格窗口标题栏
- 点击「生成图片」按钮,即可在结果区预览生成的图片
- 点击「下载PNG」按钮即可保存图片到本地
实现原理
工具采用SVG内嵌HTML实现DOM转Canvas,流程如下:
- 根据选择的主题和配置,创建临时的DOM容器,渲染带语法高亮的代码
- 将DOM转换为SVG的foreignObject,再转换为图片
- 绘制到Canvas上,输出PNG供预览和下载
注意事项
- 本工具只做简单语法高亮,复杂语法可能高亮不完全,仅供一般使用
- 过长代码可能生成图片较大,浏览器加载和下载可能需要稍等片刻
- 结果仅供分享使用,不构成专业代码展示建议