推荐 Carbon 工具¶

你是否在公众号，或者技术博客中看到下面这种令人印象深刻的代码截图呢？

如果你也喜欢这种美观的代码图片，快来试试 Carbon 网页工具，为你的代码生成漂亮的截图吧。

Carbon ：一个专门将代码片段生成漂亮截图的网站

特性¶

便捷：所见即分享
定制化：可定制图片的语法主题，窗口样式等
支持 GitHub gist 导入. 只需要在 url 后面加上 github gist id 就可以导入

用途¶

Carbon 可以很容易地为你的代码创建漂亮的图片。

并非所有平台的编辑器都支持代码模块，没有规整的换行，也没有语法高亮，对于阅读代码的体验不佳。作为替代，我们可以通过插入代码截图来替代。

当然我们也可以选择直接在本地的代码编辑器里截图，但截图效果显然比 Carbon 差了一大截，而且每次截图的尺寸可能参差不齐。

使用¶

Carbon 用起来也非常简单，也支持多种插件使用。也支持配置文件等导入和导出。

输入代码：手工编辑

打开 Carbon 页面，手工粘贴自己的代码，然后自定义颜色主题、代码语言、背景颜色和图片输出尺寸等等

输入代码：通过插件

比如在 vs code 中，可以安装 carbon-now-sh 插件，然后在编辑器中选中代码，使用快捷键 CMD+OPT+A(macOS 系统)，或者 WIN+ALT+A(windows 系统)，会自动打开 Carbon 页面，并填充好代码。

导出图片

点击 Export可以下载生成的图片，支持自定义文件名称、3 种文件尺寸可选（1x,2x,4x）和 2 种文件格式可选（PNG，SVG）。

样式¶

可定制的内容有语法主题，背景颜色，窗口主题，或者 padding 距离。

示例：

{
  "paddingVertical": "30px",
  "paddingHorizontal": "32px",
  "backgroundImage": null,
  "backgroundImageSelection": null,
  "backgroundMode": "color",
  "backgroundColor": "rgba(249,250,250,1)",
  "dropShadow": true,
  "dropShadowOffsetY": "22px",
  "dropShadowBlurRadius": "68px",
  "theme": "lucario",
  "windowTheme": "none",
  "language": "application/x-sh",
  "fontFamily": "Hack",
  "fontSize": "17px",
  "lineHeight": "158%",
  "windowControls": true,
  "widthAdjustment": false,
  "lineNumbers": false,
  "firstLineNumber": 1,
  "exportSize": "2x",
  "watermark": false,
  "squaredImage": false,
  "hiddenCharacters": false,
  "name": "",
  "width": "820"
}

样式效果：

插件¶

插件名称：carbon-now-sh 支持的编辑器：

IntelliJ IDEA
VS Code
Sublime Text 3
Vim
Emacs