跳转至

推荐 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