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

程序员文章站 2022-04-23 22:36:35

...

一、现状

你是否想把你的代码片段导出来变成一个很有逼格的图片呢？平常写博客的时候，都是直接贴代码块，如下所示，一个简单的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语言的黑色主题则可以配置如下.
【神兵利器】你是否也想生成这样有逼格的代码图?