跳到正文

代码截图生成

Code Screenshot

把一段代码渲染成带语法高亮、窗口边框和配色主题的图片。

把一段代码变成一张能放进幻灯片、issue 或帖子的 PNG——语法高亮、带窗口边框、按你选的导出倍率。它在这里用 canvas 绘制;什么都不上传,也不加载外部的高亮器。

🔒 完全在你的浏览器里运行screenshotcodeshareimage
字号
留白
折行
窗口

代码

预览

导出倍率

这个工具做什么

  • · 语法高亮用的是本站各个格式化工具自带的分词器(JavaScript、TypeScript、CSS、HTML、SQL),外加这里写的几个小分词器(JSON、Python、Go、Rust、Shell)。不加载任何外部高亮库。
  • · 文字是用你设备上的等宽字体直接画到画布上的。韩文会回退到系统的韩文字体,所以显示成文字而不是方框;折行时韩文和 emoji 按两格计算。字体因设备而异,所以同一段代码在每台设备上看起来会略有不同。
  • · PNG 按 1×、2×、3× 三种倍率生成,什么都不会上传。

想把 PNG 压得更小,就用 PNG 压缩;想放进手机或电脑的外框,就用设备外框。

怎么用

  1. 粘贴代码

    语言会自动检测,你也可以覆盖它。高亮用的是本站 JS、TS、CSS、HTML 和 SQL 格式化器的同一套分词器,再加上 JSON、Python、Go、Rust 和 Shell 的小型分词器。

  2. 设置边框

    主题、字号、内边距、窗口标题、有无红绿灯按钮、行号、阴影。预览就是 1× 的导出结果。

  3. 给长行选一个折行宽度

    折行时中文和 emoji 按两格计算,和终端的算法一样,所以混合文字的一行会在看起来该断的地方断开。

  4. 任何会被缩放的地方都用 2× 导出

    固定宽度的博客用 1×,幻灯片和 retina 屏幕用 2×,会被放大时用 3×。或者直接把图片复制到剪贴板。

常见问题

为什么在我另一台电脑上看起来不一样?

因为文字是用那台设备上的等宽字体绘制的,没有两台机器的字体完全相同。中文尤其会回退到系统里装了哪种中文字体就用哪种。换来的是什么都不用下载,渲染是即时的。

能导出 SVG 吗?

不能,只有 PNG。SVG 要在任何地方看起来一样就得内嵌字体,而内嵌一套中文字体是好几 MB。2× 的 PNG 更小,而且在哪里渲染都一样。

我到底该不该贴代码截图?

幻灯片或社交帖子,该。bug 报告或 pull request,请贴文本——图片不能搜索、复制、对比,也不能被屏幕阅读器读出来。这个工具是给第一种情况用的。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。