Codeimg 程式碼轉圖片，可自訂視窗陰影效果更適合分享社群網站

如果想把一小段程式碼分享到社群網站，透過 GitHub Gist 產生鏈結是個不錯的方式，或是參考我之前介紹的「5個程式碼分享服務，貼上後立即產生鏈結並加入高亮效果」，若要轉為精美的圖片，我也推薦過 Carbon、CodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具，對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制，接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具，讓你可以做出更適合分享的程式碼圖片。

本文要推薦的「Codeimg.io」是一個專注於將程式碼製作為圖片的線上工具，可以對一段程式碼加入高亮顏色標注效果，依照使用者選擇的社群網站位置製作為特定大小的圖片，舉例來說，Facebook 分享圖片大小為 1200×630、封面圖片 820×312、Twitter 推文適用的 506×253，亦可選擇邊框樣式、配色、佈景主題等等，製作出來的圖片相當專業。

不過把程式碼製作成圖片或許適合閱讀，對於要複製特定內容來說就會有些麻煩，但如果只是想讓社群網站上的人方便瀏覽，相較於直接把程式碼貼上來說轉為圖片、加入高亮效果會更有用。Codeimg 不僅適用於社群網站，也能直接指定圖片長寬，選擇建立成 .jpeg、.png 或 .svg 圖片格式。

網站名稱：Codeimg.io
網站鏈結：https://codeimg.io/

使用教學

STEP 1

開啟 Codeimg.io 後選擇要套用的社群網站模版尺寸，選項上會提示你這個尺寸適用於那個區塊，以及對應的圖片大小，Codeimg.io 提供包括 Facebook、Twitter、Instagram 三種最常用的社群平台，或是透過自訂功能自己輸入圖片長寬。

在下方專案名稱的命名後面可預先選擇要使用的圖片格式，Codeimg.io 亦可製作 .svg 向量圖。

STEP 2

接著把 Codeimg 預設程式碼移除，在第一行將你要轉為圖片的代碼貼上。

Codeimg 會自動對程式碼進行上色，讓其他使用者更容易閱讀，預設情況下是 MacOS 視窗效果帶上深色的高亮效果（順帶一提，如果你想把程式碼放到網頁上，hilite.me 可以對程式碼加上高亮效果而且不需要透過 JavaScript 或 CSS）。

STEP 3

左側有幾個選項，點開後會有更多可以設定的功能，例如視窗外框可調整為 macOS 或 Windows 樣式，外框尺寸、對齊位置、圓角和陰影等等，設定後右邊預覽會即時更新。

STEP 4

如果你對於預設的上色效果不滿意，從 Editor 的「Theme」可選擇各種不同的程式碼上色方式，包括淺色和深色背景，以及不同的高亮標注顏色。若 Codeimg 無法正確判斷你的程式碼類型，從「Language」可手動選擇，並能決定是否要顯示程式碼的行數。

STEP 5

最後，點選右上角的「Download」就能將這張程式碼圖片匯出，保存為預先選擇的圖片格式。