代码截图生成
Code Screenshot
把一段代码渲染成带语法高亮、窗口边框和配色主题的图片。
把一段代码变成一张能放进幻灯片、issue 或帖子的 PNG——语法高亮、带窗口边框、按你选的导出倍率。它在这里用 canvas 绘制;什么都不上传,也不加载外部的高亮器。
代码
预览
这个工具做什么
- · 语法高亮用的是本站各个格式化工具自带的分词器(JavaScript、TypeScript、CSS、HTML、SQL),外加这里写的几个小分词器(JSON、Python、Go、Rust、Shell)。不加载任何外部高亮库。
- · 文字是用你设备上的等宽字体直接画到画布上的。韩文会回退到系统的韩文字体,所以显示成文字而不是方框;折行时韩文和 emoji 按两格计算。字体因设备而异,所以同一段代码在每台设备上看起来会略有不同。
- · PNG 按 1×、2×、3× 三种倍率生成,什么都不会上传。
怎么用
粘贴代码
语言会自动检测,你也可以覆盖它。高亮用的是本站 JS、TS、CSS、HTML 和 SQL 格式化器的同一套分词器,再加上 JSON、Python、Go、Rust 和 Shell 的小型分词器。
设置边框
主题、字号、内边距、窗口标题、有无红绿灯按钮、行号、阴影。预览就是 1× 的导出结果。
给长行选一个折行宽度
折行时中文和 emoji 按两格计算,和终端的算法一样,所以混合文字的一行会在看起来该断的地方断开。
任何会被缩放的地方都用 2× 导出
固定宽度的博客用 1×,幻灯片和 retina 屏幕用 2×,会被放大时用 3×。或者直接把图片复制到剪贴板。
常见问题
为什么在我另一台电脑上看起来不一样?
因为文字是用那台设备上的等宽字体绘制的,没有两台机器的字体完全相同。中文尤其会回退到系统里装了哪种中文字体就用哪种。换来的是什么都不用下载,渲染是即时的。
能导出 SVG 吗?
不能,只有 PNG。SVG 要在任何地方看起来一样就得内嵌字体,而内嵌一套中文字体是好几 MB。2× 的 PNG 更小,而且在哪里渲染都一样。
我到底该不该贴代码截图?
幻灯片或社交帖子,该。bug 报告或 pull request,请贴文本——图片不能搜索、复制、对比,也不能被屏幕阅读器读出来。这个工具是给第一种情况用的。
可以从这些接进来
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
ASCII 表格生成
ASCII Table Generator
把表格画成等宽 ASCII、Markdown 或制表线边框,好贴进 README 和代码注释里。
ASCII 字符大字
ASCII Text Art
把文字画成 figlet 系列字体的大号 ASCII 字母,用在横幅和提交信息里。
字符图编辑器
ASCII Diagram Editor
在字符网格上画方框、连线、箭头和标签,转角和交叉点由相邻格是否被占用自动推出,可在 Unicode 制表符和纯 ASCII 之间切换。
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
ASCII 表格生成
ASCII Table Generator
把表格画成等宽 ASCII、Markdown 或制表线边框,好贴进 README 和代码注释里。
设备样机图
Device Mockup
把截图放进手机、平板、笔记本或浏览器外框里,配上背景和阴影。
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流,在不改变尺寸的前提下减小 PNG 体积。
Base64 编码解码
Base64 Encoder & Decoder
对文本和文件做 Base64 与 Base64URL 编解码,UTF-8 处理正确。
JSON ⇄ CSV 互转
JSON ⇄ CSV
把嵌套 JSON 按点路径列名拍平成列,或者从表格重新拼回对象。