【神兵利器】你是否也想生成这样有逼格的代码图?

一、现状

你是否想把你的代码片段导出来变成一个很有逼格的图片呢？平常写博客的时候，都是直接贴代码块，如下所示，一个简单的HelloWorld程序，平常代码都是这样展示的。

package com.csdn.oyp;

/**
 * 作者：欧阳鹏
 * 博客地址： https://ouyangpeng.blog.csdn.net/
 */
public class HelloWorld {
    /**
     * 输出一行字符串 “Hello World!”
     */
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

怎么说呢？ 看起来是不是不够逼格。

二、提升逼格

如果代码块，如下面的图片一样的展示，会不会逼格高一点？

三、Carbon

3.1 Carbon简介

没错，上面的代码图片就是使用Carbon在线生成的。

Carbon 是一个代码截图生成器，通过设置窗口颜色和语言类型就可以导出图片，也可以自定义代码字体和背景色，支持近 30 种主题色和几乎所有主流语言，用于分享时更加美观。

官网： https://carbon.now.sh/
源码地址： https://github.com/carbon-app/carbon

打开官网之后，展示的页面如下所示：

编辑窗口如下所示：

3.2 Carbon导入代码方式

有以下三种不同的方法可以将代码导入到 Carbon：

有几种不同的方法可以将代码导入到 Carbon：

• 把文件拖放到编辑器中
• 在 carbon url 后面添加 GitHub gist id （比如 carbon.now.sh/你的_gist_id）
• 直接粘贴代码
• 使用Carbon插件

• IntelliJ IDEA carbon-now-sh - 在 IntelliJ IDEA 中通过右键菜单导入选中的代码到 Carbon
• Atom carbon-now-sh - 在 Atom 中通过 shift-cmd-A 快捷键导入当前文件到 Carbon
• VS Code carbon-now-sh - 在 VS Code 中通过 carbon 命令导入当前文件到 Carbon
• Sublime Text 3 carbon-now-sh - 在 Sublime Text 3 中通过自定义快捷键导入选中的代码到 Carbon
• Vim carbon-now-sh - 在 Vim/Neovim 中通过 CarbonNowSh() 函数导入选中的代码到 Carbon
• Emacs carbon-now-sh - 在 Emacs 中通过 carbon-now-sh 交互函数导入选中的代码到 Carbon
• Xcode carbon-now-sh - 在 carbon.now.sh 中打开选中的代码
• Xcode nef - 这个 Xcode 扩展程序能让你将选中的代码一键导出成 Carbon 片段

比如我在Android Studio 安装了 carbon-now-sh 插件，然后在 Android Studio 中通过右键菜单导入选中的代码到 Carbon，如下所示

然后就直接打开了https://carbon.now.sh/ 网站，并且将代码以及自动填充好了！

3.3 定制你的代码图片

如上图所示，当你把代码导入到 Carbon 后，你可以定制生成的代码图片。可定制的内容有语法主题，背景颜色，窗口主题，或者 padding 距离。

3.3.1 语法主题

carbon支持不同风格不同语言，你可以选择你需要的，比如当我需要Java语言的黑色主题则可以配置如下.

3.3.2 背景阴影

除了设置风格和语言外，carbon还允许我们设置背景的阴影，默认是灰色。

比如我将页面背景调为白色

背景调为红色

3.3.3 设置主题其他设置

你可以选择你喜欢的主题

VSCode主题

3.3.3 其他设置

当然你还可以设置比如字体、窗口样式、是否显示行号等等。

• 设置显示行号
  

• 设置字体
  

• 设置窗口样式
  

3.4 导出图片

当你定制完图片样式后，可以分享到推特上面，或者点击export直接保存为PNG或者SVG格式图片。

正在导出图片…

导出的图片

---

作者：欧阳鹏 欢迎转载，与人分享是进步的源泉！
转载请保留原文地址：https://ouyangpeng.blog.csdn.net/article/details/106731755
☞ 本人QQ: 3024665621
☞ QQ交流群: 123133153
☞ github.com/ouyangpeng
☞ [email protected]
————————————————
版权声明：本文为CSDN博主「欧阳鹏」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://ouyangpeng.blog.csdn.net/article/details/106731755
————————————————