TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
Ray.so 程式碼轉圖片教學：設定外觀與匯出分享
Ray.so 如何把程式碼轉成圖片？依序確認語言、調整背景行號與內距，選擇 PNG 或 SVG，再檢查分享尺寸下的可讀性。說明設定網址的還原方式，以及 Copy URL 分享前應確認的程式碼內容。
用 AI 摘要這篇文章：
Ray.so 可以把程式碼轉成圖片，調整背景、行號與留白後匯出 PNG 或 SVG。準備分享時，除了看圖片好不好看，也要確認文字是否清楚、內容是否適合公開。
先保留原始碼，再決定圖片要放在哪裡
Ray.so 是 Raycast 團隊提供的程式碼圖片工具，開啟網頁就能看到編輯區與預覽。它適合把短範例放進社群貼文、簡報或教學配圖；若讀者需要複製程式碼執行，請在圖片旁另外提供文字版本。PNG 裡的字無法像網頁程式碼區塊一樣直接選取複製。
先在自己的編輯器保留一份原始碼，再貼入 Ray.so。API key、密碼、客戶資料、內部網址與未公開專案內容，應先移除或換成明確的示意值。圖片上的視窗標題也要檢查，別只顧著刪程式碼裡的資料。
我會先想好圖片最後顯示的寬度，再挑要放的片段。一張投影片和一則手機貼文能容納的文字不同；把整個檔案縮進圖片，通常不如保留一段能說明重點的範例。沒有固定「幾行以內一定清楚」的標準，最長那一行和最後呈現的大小更值得檢查。
貼上程式碼後，先確認語言與換行
在中央編輯區取代預設範例，下方 Language 會顯示語言名稱；名稱旁的 auto 表示目前使用自動偵測。若貼入 JavaScript 卻看到不合適的語言，打開 Language 手動選擇，再看關鍵字、字串與註解是否呈現預期的色彩。
語法上色不是程式正確性的檢查。少一個括號、函式名稱打錯，仍可能產生一張看起來正常的圖片。教學範例若要讓別人照著執行，請先在原本的開發環境確認結果。
碰到特別長的網址、鏈式呼叫或資料物件，不要假設工具會替你整理成最容易閱讀的版本。先看預覽右側是否完整，必要時回到文字內容手動分行，或把不影響說明的部分省略。省略時標清楚，別讓讀者把片段當成完整可執行的程式。
背景、行號與內距可以連同網址保存
Ray.so 下方的 Theme 用來選擇外觀主題，Dark mode 切換程式碼視窗的明暗；Background 控制外圍背景，Line numbers 控制行號。Padding 則是程式碼視窗外圍的留白，介面提供 16、32、64、128 四個選項。
如果圖片要放進已有底色的投影片，可以先關閉 Background，再檢查輸出放上去的效果。教學中會提到「第幾行」時，開啟 Line numbers 比較容易對照；單純展示幾行範例時，則可依畫面需要關閉。
我在 Ray.so 關閉背景、開啟行號，並把 Padding 改成 16 後，網址出現了 background=false、lineNumbers=true 和 padding=16。用這個完整網址開啟新分頁，三項設定都保留下來。要重用這組外觀，可以保存含設定的網址；它和登入帳號後的歷史記錄是不同功能。
留白不是越大越好。如果貼文寬度固定，外圍空間占得越多，程式碼本身就會顯得越小。先從預覽調整，再以實際分享尺寸檢查，不必為了背景完整而犧牲文字可讀性。
分享圖片先選 PNG，需要 SVG 再確認接收軟體
2026 年 9 月的 Ray.so 匯出選單提供 Save PNG、Save SVG、Copy Image 與 Copy URL，Size 子選單有 2x、4x、6x。這幾個選項的用途不同：
| 選項 | 何時使用 | 匯出後要檢查什麼 |
|---|---|---|
| Save PNG | 社群、文章配圖或一般簡報 | 文字是否完整，縮到刊登尺寸後能否閱讀 |
| Save SVG | 接收軟體接受 SVG，且你需要這個格式 | 在實際使用的軟體開啟，確認字型、背景與排版 |
| Copy Image | 想直接貼進支援圖片的應用程式 | 貼上的是圖片，且內容沒有缺漏 |
| Copy URL | 要讓對方開啟可還原內容的頁面 | 連結內的程式碼與標題是否都可分享 |
點擊 Export Image 的主要按鈕可啟動 PNG 匯出，其他選項在旁邊的箭頭選單。從 Ray.so 公開匯出程式碼 可看到，PNG 使用所選倍數作為輸出像素比例，SVG 則走另一個匯出方法。因此，不要把 2x、4x、6x 理解為每種格式都有相同的放大方式。
一般分享先試 PNG 就好。若圖片在目標版面看起來糊，可提高 PNG 倍數再比較；若文字本來就太小，增加像素仍不會讓它在貼文裡變大，應該減少內容或縮小留白。6x 也不代表比較適合所有用途，圖片太大會增加上傳與載入的負擔。
SVG 副檔名不等於「到任何設計軟體都能任意編輯每個字」。若交付對象指定 SVG，先把檔案放進對方會用的軟體確認；出現空白、字型跑掉或排版不同時，可改交 PNG，並另外附上原始文字。
Copy URL 要當成分享程式碼來使用
圖片只呈現畫面，分享網址則可能帶著可還原的程式碼。Ray.so 的公開程式碼儲存實作 會把輸入內容以 Base64 編碼放進網址，再在開啟時解碼。Base64 是可還原的文字編碼，不是密碼保護。
在 Copy URL 的公開實作 中，完整網址會交給短網址 API，再將回傳的連結複製到剪貼簿。因此，不應因為工具在瀏覽器內操作，就把所有功能都視為完全離線。這是公開原始碼所呈現的行為，不能用來保證正式網站的全部資料處理方式。
分享前，重新讀過程式碼、註解和標題。網址比較短，也不會讓其中的內容自動變成私密資料。若你只是要留下背景和內距設定，最好從沒有私人內容的範例開始保存網址，別把工作中的完整程式碼順便存成公開範本。
下載後，用讀者會看到的大小檢查一次
完成匯出後，先開啟檔案，再放進預定使用的貼文或簡報，檢查最長一行、右側括號、引號、中文註解與底部最後一行。看預覽覺得清楚，不代表縮小刊登後也一樣。
如果沒有取得圖片，先檢查瀏覽器的下載狀態；使用 Copy Image 卻貼不上時，可改用 Save PNG，下載後再插入目標應用程式。若 SVG 在接收軟體顯示不完整，先改用 PNG 完成交付，不要只改副檔名。
如果問題是內容太多或字太小，回到編輯區縮短片段、調整換行和 Padding，再重新匯出。保留原始文字，能讓你重做圖片時不用從截圖辨識程式碼，也方便讀者取得可複製的版本。
先拿一段能公開的短範例做圖，放進真正要發布的位置看一次。字看得清楚、內容沒有截斷，而且分享出去的資料都經過確認，才算完成這張程式碼圖片。
