# 在线代码截图工具dute.org/code-snapshot

*Published:* 2024-09-11
*Author:* 飞翔001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年9月11日，已超过 180天没有更新



![](https://www.xarjtc.com/wp-content/uploads/2024/09/e22d951f1107d2f.webp)

在线代码截图工具，根据输入的源代码，可以生成漂亮的代码图片。本工具可自动识别输入的代码属于哪种程序语言，包括 C、C++、Java、Go、Python、PHP、JavaScript、TypeScript、CSS、HTML 等几十种开发语言，并提供了若干高亮主题，以及相关图片生成选项，以生成不同风格的源码截图。生成的图片可用于公众号文章、博客、微博、论坛等需要展示代码的场合。

工具提供了多种高亮主题，可以生成不同高亮颜色的代码截图;另外，为了让生成的代码截图更具个性化，本工具还提供若干选项，来控制截图背景、代码窗口、代码字体、大小、编辑器等细微地方，以生成不同风格的代码截图。

本工具生成的截图，相比自行截取代码图片，具有更好的一致性(风格、尺寸等)和更多的选择性(多种主题支持)，是开发人员展示代码、Demo 演示的必备工具。

1、高亮主题

高亮主题用于控制代码渲染时的字体颜色和样式(包括行号)，本工具提供了多达 18 种代码高亮主题，所有内置主题均由本站精选，可随意切换。

2、程序语言

该选项指明编辑器中的代码是哪种程序语言。为提升代码截图工具的使用体验，本工具支持自动识别常见程序开发语言，因此，通常情况下，您无需特意指定程序语言。

3、背景色

该选项用于控制截图的背景色，该背景色是用于衬托代码窗口，可以让代码窗口无论在任何情况下都显得醒目。本工具内置了 20 种背景颜色，其中包含透明色。

4、代码窗口选项

这里包含 3 个和代码窗口相关的选项：

是否显示窗口控制按钮：该选项用于控制代码窗口顶部控制按钮是否显示

窗口是否显示圆角效果：该选项指示是否需要对代码窗口的 4 个角使用圆角效果

窗口是否使用阴影效果：该选项指示是否需要对窗口使用阴影效果

您可以随机开/关上述选项，以观察实际效果。

5、代码字体

该选项用于改变代码窗口中代码使用的字体。本工具内置了 9 种常用的用于开发的等宽字体。当切换字体时，如果您的电脑上没有安装对应的字体，将使用 Menlo, monospace, Courier 作为后备字体。

特别注意

由于苹果电脑 Macosx 系统的限制，Safari 浏览器只能正常渲染 Courier 和 Menlo 字体，其余字体，仍将显示为 Menlo 字体。

6、字体大小

该选项用于控制代码窗口中代码字体的大小，默认为16px。为了保证截图后代码的可读性，本选项支持的最小字体为12px，最大字体为20px。

7、编辑器选项

本工具提供了 2 个和编辑器相关的选项：

是否显示行号：该选项用于控制代码行号的显示和隐藏

是否显示水印：该选项用于控制在编辑器右下角是否显示水印

可随意切换勾选状态来观察实际的效果。

在线网址：https://www.dute.org/code-snapshot