超酷炫！5 款图像工具瞬间提高代码逼格！

àì夳堔傛蜴生んèń 2023-06-20 06:35 14阅读 0赞

公众号关注 “五分钟学算法”

设为 “星标”，每天带你逛好玩的！

平时我们使用着漂亮的 IDE，编译器里的代码**颜色丰富、支持高亮**，但其实对外分享的时候，比如公众号、微博、Twitter 等社交平台，大部分**都不支持代码排版**，看代码简直让人头疼。

![format_png][]

所以今天我给大家推荐几个快速创建代码图像的工具，让你的代码分享逼格更高、排版更直观。

![format_png 1][]

**Marmoset**

网站地址：http://t.cn/AiT9X7mV

![format_png 2][]

**Marmoset** **是一款** **Chrome 应用程序**，可以让你以透视的方式截取你的代码截图。

从 Chrome 商店将 Marmoset 添加到 Chrome，之后启动 **Marmoset 窗口**，左侧窗口 Marmoset 默认提供了一段代码，右侧窗口展示对这段代码的透视效果，拖动右侧窗口可以调整透视角度，效果实时显示，窗口底部提供不同编译器主题、代码显示模式、透视代码效果等大量内置参数。

![format_png 3][]

调整好透视效果，点击窗口底部的「**Save As …**」将代码截图保存到计算机本地，命名时建议添加**.jpg、.png、.tif** 等常见图片格式，以便后期计算机读取图片。

**Codeimg.io**

网站地址：https://codeimg.io/

![format_png 4][]

**Codeimg.io** 是一个仍在**测试中**的创建代码图像的工具，目前发布了创建代码图像所需的**基本功能**：按照常用社交平台 Facebook、Twitter、Instagram 及自定义创建项目、支持 **JPG、PNG** 和 **SVG** 项目格式、调整字体大小、保存用户定义的设置等。

![format_png 5][]

创建项目后进入 Codeimg 页面，左侧功能参数调整区，右侧上部新建项目按钮、当前项目名称、项目下载按钮，右侧下部项目预览及代码标题、内容编辑区域。

![format_png 6][]

直接将你的代码复制粘贴到右侧内容窗口，左侧「**Canvas**」参数调整画布大小、窗口到画布的间距、画布背景颜色。

![format_png 7][]

「**Window**」参数调整窗口样式 MacOS / Windows、窗口按钮、标题、窗口宽度 / 高度、窗口圆角、阴影偏移 / 虚化 / 扩散 / 颜色及透明度等。

![format_png 8][]

「**Editor**」参数调整窗口主题、代码语言、字体大小及行号显示。

![format_png 9][]

**ToDo** 页面，你可以查看 Codeimg 目前已经实现的功能、正在开发的功能、未来将要开发的功能，如果你有什么特别想要的功能或建议，也可以反馈开发团队。

![format_png 10][]

**CodeZen**

网站地址：http://codezen.rishimohan.me/

![format_png 11][]

**CodeZen** 是一个非常简约的代码转图像工具，就像操作文本编辑器一样简单，能快速将你的源代码导出为具有语法风格的图像。

![format_png 12][]

将你的代码复制粘贴到 CodeZen，从 CodeZen 预设的语言、字体大小、窗口主题、背景颜色、窗口宽度等参数来调整代码图像效果，保存图像支持 **JPG** 和 **PNG** 格式。

**Carbon**

网站地址：https://carbon.now.sh/

![format_png 13][]

**Carbon** 是由 Dawn Labs 创建开发的一个代码转图像的**开源**项目，目前在 GitHub 上拥有 **20000** 多颗星，每月活跃用户超过 **50000**。

![format_png 14][]

Carbon 支持直接拖入代码文件、将 GitHub gist id 附加到 URL、直接粘贴代码到编辑器三种方式导入你的代码。

![format_png 15][]

将代码放入 Carbon 后，你可以通过改变语法主题、背景颜色 / 图像、窗口主题或填充来自定义代码图像，设置背景图像时还支持将图像文件拖放到 Carbon 来作为代码图像的背景。

![format_png 16][]

在自定义图像后，你可以发送图像链接或下载保存图像，保存图像支持 **PNG** 和 **SVG** 两种格式。

**Glorious Demo**

网站地址：https://glorious.codes/demo

![format_png 17][]

**Glorious Demo** **是一个开源的 JavaScript 库**，它提供了一个简单的 API 来为你的代码示例创建动画。目前在 GitHub 拥有近 **3000** 颗星。

GitHub 地址：

https://github.com/glorious-codes/glorious-demo\#installation

![format_png 18][]

Glorious Demo 的详细使用方法 GitHub 上有详情的介绍，大家自行查看～

**最后**

今天的内容就是这些，希望对你有所帮助～

![音符][format_png 19]

**有热门推荐????**

1.【程序员】[我们就必须承认：这个世界上，有很多问题，就是无解的][Link 1]

2.【GitHub】[我在 GitHub 上看到了一个丧心病狂的开源项目！][GitHub]

3.【算法】[动画：七分钟理解什么是KMP算法][KMP]

4.【数据结构】[十大经典排序算法动画与解析，看我就够了！][Link 2]

![format_png 20][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrRmljdFYxVjVIQmRpYWdMOUZ3cmljOXZxZDhkWkR1Q2ljc1pMbmJwbVlDOXVzNXJWUEt1Z1VLcjV1QS82NDA_?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi83UVJUdmtLMnFDNUdaV2QzVnZhY1cxOGR0RE1nRVZGbHh2UDM5RzNUeWliMEN1Sm9XUjg2aHNsZk9YS3g0bmdhMHhFMG9Ta0hvOW5sNG45U0RpYzZIREJBLzY0MD93eF9mbXQ9Z2lm?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrNzV1Sm9Wd041ZXVicXA2YWlhQlZ0TEtRMDBoYVNETUkyWE00SDJpYUpmcVRQcGFudkphdzFlYlEvNjQwPw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrckZaRzFCbUZYeElISW5uV09RUjh2cnNwd2dnN25ud2NBcDlGOXBOUE85ZWNpY1RqdHh1dEoyUS82NDA_?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFraWJUcklXalZXUG92ZUlTbEJxMU1YdkRhWlRqcThvTllJRWljVFpyRktIaWNOeEFqb3FpY2licmJwQ1EvNjQwPw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrMmtmU1QxNm9xRTRwQzlQcVgwcTA0SUwzZHdpYTRLc1pLSkpkaWFzaHZGQnZ3UEZ2ZXVtOFNVMkEvNjQwPw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrZnIxSnpTQmliVlY4MXNYeFZHczB3UDR5VmZuU1hpYklpYnN2eTNoQXFiTWljQkhBUzU5WGhGUTZRUS82NDA_?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrVDR3NlAyQ0N3cVlUYVpXWUFyaHJjM3g2bFZYaWFkbmlhTmFzRE8xZG5sS2hIdmVSOGdDWGdhR3cvNjQwPw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrM1U2aGVkU2ljRGNibWZkVWQzSm4zVVY3R01HaDFoaFFqN2trYm9nUlh3cmNOa1Uwck9jUnA3Zy82NDA_?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrODFDWmpFbFZTMXVwOVloUndTZjRaSDlxNXVpYkxONHlXVUhGUjM5VGdxOEtsbzdNc3ZMUmlhNXcvNjQwPw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrUVZaU2NaaWNDSlBybHdQa25jUGljajByTlJLRDkxdU1KSjd5a1hSR05JVVlMWThNa2ljdEI2aWFYZy82NDA_?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrd0RZdlNpY0V6aWNGbDl0emd1Q1ZIM0ZUUlBQdUd3RmlhcTlWaWJmd3lxS1kzU3pOMkZSU211UWZ1Zy82NDA_?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrdXJmUEFNU0YzbHNYaWFFb2p6RmZkOTNLUVhwYm5rYk5MS1NvTmJ4aWNPYlFKcXA5eVBwazNqc2cvNjQwPw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrSDBLZzBzOW5oUnYwc2lheTlMVHl4QWx3SFp2WkhydlhzTmR3OFRLeEdqa0tMRlZPU0tHNG1YQS82NDA_?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrNmlhUWZ6YnlESUl1TFpyb2ljOEttaExmaWNaeUp4R1FreXE3Z2ljaEhDRVFqMVNRaWFpYTNmNW1xS3Z3LzY0MD8?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrVkNmTmpEcFlyYWljMU82eFdFNk1pY01jRUJKaEpyMnRkUW54Z0xZaWFuWUNBa29Sc3BEM3BqeHFnLzY0MD8?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrNjlpYXNUU2dqekppYkhQdUJYbFJyelpVQ1lSdUhVZzk1c2hlOXJFNkl1cEhjUnR4VlVVaWI3bzJnLzY0MD8?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrRmdQakNDcUNZYVhqUmVPU2NVaFA3RmhMVmhHQnd4V3pxMldIMTZGanJYRk5hQmljN1Z0Z2VpYmcvNjQwPw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9oSjJKaG9aaWJPTHFpYTNqRWczdHZadHQwTDIxNTcyeXFrRmljMGt6bm1zNTk4M01EaWFtZ0M4RmNyT2NLNTNFSXRnb214dExDQnFGdTdiVlV4dHNmVFBSZGcvNjQwPw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L2NaVjJoUnB1QVBpYUpRWFdHeUM5d3JVeklpY2liZ1hheXJnaWJUWWFyVDNBMXl6dHRidGFPMEpsVjIxd01xcm9HWVQzUXRQcTJDN0hNWXN2aWNTQjJwN2RUQmcvNjQwPw?x-oss-process=image/format,png
[Link 1]: https://blog.csdn.net/kexuanxiu1163/article/details/100978627
[GitHub]: https://blog.csdn.net/kexuanxiu1163/article/details/100137152
[KMP]: https://blog.csdn.net/kexuanxiu1163/article/details/97071390
[Link 2]: https://blog.csdn.net/kexuanxiu1163/article/details/103051357
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ENjdwZWNlaWJlSVR1U2ljRUtJcWdpYU9FdG9KaWEwTGcxYTJkWkVLcXlwYzlFcDUzVkpsb0Vobzg4VkdYeVpFSHB2d1paVXR6VnR2RTVJRWliQU5kbFdwUVJRLzY0MD93eF9mbXQ9anBlZw?x-oss-process=image/format,png