CodeZen 將程式碼轉為 JPG、PNG 圖片，上色後加入視窗及陰影效果

如果要呈現一段程式碼，通常會加入更易於閱讀的色彩效果，這在網頁裡不難做到，甚至大多數編輯器都已經內建上色功能，對於不支援 JavaScript 的平台來說也有像是 hilite.me 工具可以轉換。假如你是要讓程式碼呈現在簡報或紙本中，製作成圖片或許是個不錯的方法，之前介紹過「Carbon 將程式碼轉為美麗圖片，在社群分享更引人注目」是一款可將程式碼轉為圖片格式的線上工具，還能加入色彩、陰影和視窗外框，讓一段枯燥無味的程式碼更吸引人。

本文要推薦的「CodeZen」是一款將代碼轉為圖片的線上工具，和 Carbon 類似，不過可設定的選項較少，換句話說就是操作上更簡單，CodeZen 可產生視窗陰影效果，裡頭程式碼還能加入色彩、行數，在閱讀時更接近代碼編輯器效果。

如果你想看 CodeZen 產生的範例，我在上面已經製作一張從 Google Maps 複製而來的範例程式碼，透過這項服務可設定不同的程式語言類型、文字大小、佈景配色、背景、圖片寬度和是否顯示行數，產生的圖片質感很好，可快速輸出為 JPG 或 PNG 兩種常見格式。

網站名稱：CodeZen
網站鏈結：https://codezen.rishimohan.me/

使用教學

STEP 1

開啟 CodeZen 後，會有一段範例程式碼，直接將它們清除、貼上自己的即可。

STEP 2

從左上角 Language 選擇你的程式語言類型，支援 JavaScript、CSS、Ruby、Shell、HTML、Python、PHP、Markdown、C/C++/C# 等常見的程式碼，選擇正確才會有對的顏色。

STEP 3

如果你覺得白色視窗太刺眼，從 Editor Theme 可選擇其他佈景配色，選好後會立即套用到目前頁面，讓你看看效果有沒有符合需求。

STEP 4

背景有白色、灰色和黑色三種，可惜沒有提供透明背景，還有三種視窗寬度可以調整，這部份都很直覺簡單，選好後會自動呈現於下方。如果你希望在每一行前面顯示行數（或許比較利於說明或和其他人討論），勾選「Show line numbers」就會出現行數。

最後，透過右上角的「Save JPG」或「Save PNG」就能將畫面保存為圖片格式。