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

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

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

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

CodeZen

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

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

使用教學

STEP 1

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

CodeZen

STEP 2

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

CodeZen

STEP 3

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

CodeZen

STEP 4

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

CodeZen

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

CodeZen

值得一試的三個理由:

  1. 將程式碼轉為圖片效果,支援多種常見程式語言
  2. 可設定文字大小、佈景配色、背景、寬度或顯示行高
  3. 輸出為 JPG、PNG 圖片格式
分享本文