【神兵利器】你是否也想生成這樣有逼格的代碼圖?

一、現狀

你是否想把你的代碼片段導出來變成一個很有逼格的圖片呢？平常寫博客的時候，都是直接貼代碼塊，如下所示，一個簡單的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
————————————————