Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果

Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果

如果你想把一段程式碼製作成圖片,只要從編輯器直接擷圖就能做到,看起來可能略顯陽春,不過好處是該有的都有,內容呈現上也沒什麼問題。若你想讓程式碼擷圖變得更好看,我之前也介紹過一些程式碼轉圖片工具,多半都能加入外框、選擇不同配色和視窗陰影效果,更重要的是會對不同程式語言類型上色,例如:CodeZenCarbon 將程式碼轉為圖片並加入視窗效果;如果要分享到社群網站,Codeimg 還可依照使用者選擇的平台預先裁切好特定尺寸大小。

本文要介紹的Ray.so」也是一個線上將程式碼轉為圖片的工具,預設情況提供四種配色主題,可切換背景顯示或深色模式,四種不同的寬度大小,選擇後即時更新在網頁上。當然最重要的是支援大部分常見的程式語言,內建「自動選擇」模式在程式碼貼上後自動辨識,加入色彩效果。

和其他同類工具一樣,Ray.so 可以在圖片加入視窗和陰影效果,背景看起來很有質感,點選下載就能將當前看到的畫面保存為 .png 格式。不過轉為圖片的缺點就是其他人難以直接複製使用,若有分享程式碼讓閱讀者快速複製的話建議使用程式碼分享服務

Ray.so
https://ray.so/

使用教學

STEP 1

開啟 Ray.so 會看到一段 JavaScript 程式碼範例,直接將你要製作成圖片的程式碼貼上,網站會自動偵測程式語言類型,上方的視窗名稱可編輯,會成為下載圖片檔名。

Ray.so

預設情況會自動偵測(Auto-Detect)程式語言,如果有誤可以從右下角手動選擇,選擇程式語言可確保在上色時獲得較為正確的顯示效果。

Ray.so

STEP 2

左下角的顏色可以選擇四種不同配色模式,也有顯示隱藏背景、深色模式和調整視窗外側內距的功能,如果你想讓畫面看起來不擁擠,可以選擇較高的內距值,選擇後都會即時顯示在圖片上。

Ray.so

STEP 3

最後,點選右下角「Download Image」即可將當前看到的畫面保存為 PNG 格式。

Ray.so

STEP 4

下圖就是我在 Ray.so 製作的圖片範例,使用 Swift 程式語言加上深色效果,看起來很有氣勢,對於在網站呈現程式碼來說是個蠻不錯的選擇。

Ray.so

值得一試的三個理由:

  1. 線上將程式碼轉為圖片,支援各種常見程式語言類型
  2. 內建四種配色主題,亦可顯示隱藏背景、深色模式或視窗外側內距
  3. 點選下載圖片即可取得 PNG 檔案
分享到...