如果你想把一小段代碼分享到各大社交網站，透過 GitHub Gist 産生連結是個不錯的方式。若是要轉為精美的圖檔， Carbon、CodeZen 這類可以将代碼轉成圖檔、加上視窗陰影和上色效果的線上工具，或許來說會更好用。
大家都知道社交網站在不同區塊或類别都有不一樣的圖檔尺寸限制，接下來要介紹的這項服務就是整合了各大社交網站模版和代碼的轉圖檔工具，讓你可以做出更适合分享的代碼圖檔。
什麼是 Codeimg.io
「Codeimg.io」是一款幫你把源代碼轉換成漂亮圖檔格式的線上工具，以便于在社交網絡分享。它可以對一段代碼加入高亮顔色标注效果，按照使用者選擇的社交網站位置制作為特定大小的圖檔。
舉例來說：Facebook 分享圖檔大小為 1200×630、封面圖檔 820×312、Twitter 推文适用的 506×253，亦可選擇邊框樣式、配色、主題等等，制作出來的圖檔相當專業。
雖然制作成圖檔的代碼或許适合閱讀，對于要複制特定内容來說就會有些麻煩。但如果隻是想讓社交網站上的人友善浏覽，相較于直接把代碼貼上來說轉為圖檔、加入高亮效果會更有用。
Codeimg 不僅适用于社交網站，也能直接指定圖檔長寬，選擇建立成 .jpeg、.png 或 .svg 圖檔格式。
網站名稱：Codeimg.io
網站連結：https://codeimg.io/
「Codeimg.io」支援功能清單：
- 寬度、高度
- 邊框寬度
- 背景色
- 樣式（Win/macOS）
- 顯示按鈕
- 顯示标題
- 圓角邊框
- 陰影大小、顔色
- 主題
- 程式語言
- 字型大小
- 顯示行數
「Codeimg.io」使用教學
STEP 1
開啟 Codeimg.io 後選擇要套用的社交網站模版尺寸，選項上會提示你這個尺寸适用于那個區塊，以及對應的圖檔大小。
Codeimg.io 提供包括 Facebook、Twitter、Instagram 三種最常用的社交平台。Facebook 包括 Profile、Cover、Shared、Event Image 樣式，Twitter 包括 Profile、Header、In-Stream Photo，Instagram 包括 Profile、Thumbnails、Stories 等樣式。或是透過自定義功能自己輸入圖檔長寬。
在下方項目名稱的命名後面可預先選擇要使用的圖檔格式，Codeimg.io 亦可制作 .svg 矢量圖。
STEP 2
接着把 Codeimg 預設程式碼移除，在第一行将你要轉為圖檔的代碼貼上。
Codeimg 會自動對代碼進行高亮，讓其他使用者更容易閱讀。預設情況下是 MacOS 視窗效果帶上深色的高亮效果。
STEP 3
左側有幾個選項，點開後會有更多可以設定的功能，例如視窗外框可調整為 macOS 或 Windows 樣式，外框尺寸、對齊位置、圓角和陰影等等，設定後右邊預覽會即時更新。
STEP 4
如果你對于預設的高亮效果不滿意，可以從 Editor 的「Theme」可選擇各種不同的代碼高亮方式，包括淺色和深色背景，以及不同的高亮标注顔色。若 Codeimg 無法正确判斷你的代碼類型，可以從「Language」手動選擇，并能決定是否要顯示代碼的行數。
STEP 5
最後，點選右上角的「Download」就能将這張代碼圖檔導出，儲存為預先選擇的圖檔格式。
參考文檔
- https://www.google.com
- https://www.appinn.com/codeimg-online/
- https://free.com.tw/codeimg-io/