工具用的順手嗎？
你的回饋能幫助我們做得更好
將程式碼片段一鍵生成精美截圖，支援多語言高亮和自定義主題。
概覽
了解工具能解決的問題、計算或處理邏輯，以及資料邊界。
這個工具會把你輸入的程式碼排成帶有語法色彩的靜態圖片，適合放進教學文章、簡報或社群貼文。它處理的是外觀呈現：不會執行程式、不會編譯，也不會檢查語法或判斷程式是否正確。若要讓讀者實際複製、搜尋或修改程式，請同時提供原始文字。
可選語言包括 JavaScript、TypeScript、JSX、TSX、Python、Java、Go、Rust、C++、C#、PHP、Ruby、SQL、Bash／Shell、JSON、YAML、HTML／XML 與 CSS。主題有糖果粉、海洋藍、落日橙、森林綠、午夜灰、夢幻紫和純淨淺灰。選對語言有助於使用相應的語法著色；未列出的語言沒有專屬選項，顏色也可能不符合程式語意。
程式碼區保留輸入內容的空白與換行，行號可協助讀者定位範例。視窗標題是你自行填入的標籤，例如檔名或片段用途；留空時不顯示標題。視窗按鈕是紅、黃、綠圓點的裝飾，可單獨顯示或隱藏。主題同時改變程式面板與外層背景的配色，外邊距則控制卡片周圍的留白。
字號可調整為 10 至 28 px，外邊距可調整為 0 至 128 px。較大的字適合投影或縮圖閱讀，但長程式行也會令圖片變寬；增加外邊距會留出更多背景空間，不會改變程式本身。預覽及下載都呈現靜態畫面，PNG 裡的字不是可編輯的程式碼文字。
例如要在簡報中展示一個 JavaScript 函式：貼上函式內容，語言選 JavaScript，主題選海洋藍，視窗標題填入 greeting.js，再視投影大小調整字號與外邊距。需要逐行講解時保留行號；若畫面要簡潔，則可關閉行號和視窗按鈕。確認預覽沒有漏掉內容後，下載 PNG 或使用複製圖片。
這個流程只改變圖片排版，不會將程式碼轉成可執行檔，也不會替你判讀範例結果。若程式含有很長的單行，預覽區可能需要橫向檢視；可考慮只選取要講解的片段，並檢查匯出圖的左右邊界。
下載會輸出 PNG 圖片。按「複製圖片」時，若目前瀏覽器環境允許寫入圖片剪貼簿，圖片會複製到剪貼簿；若不支援，操作會改為下載 PNG。若匯出失敗，可重新操作，並先確認程式碼欄位不是空白。
產出的圖片會將程式文字變成像素，因此貼到文件後通常不能像程式碼區塊那樣選取或搜尋。需要讀者複製的教學內容，建議在圖片旁附上程式碼文字，並為圖片加上簡短說明。
作者可把一段重點程式碼排成圖片放在文章旁，再附上可複製文字，讓版面更容易掃讀，也保留實作所需的原始內容。
授課者可調大字號並保留行號，讓投影中的程式片段較易跟讀；程式較長時，拆成數張各自聚焦的圖片會較清楚。
分享者可用視窗標題標示檔案或主題，配合一致的色彩呈現短範例。若同事需要執行或審閱，應一併傳送程式碼文字。
指南
依步驟完成操作，並透過範例核對輸入與結果。
貼上要展示的程式片段。先刪除不想公開的內容，並確認換行與縮排符合預期。
選擇對應的程式語言和背景主題。若語言不在選單內，可用純文字方式看待著色結果，勿將顏色當成語法驗證。
輸入可辨認的視窗標題；調整 10–28 px 字號與 0–128 px 外邊距，再決定是否顯示視窗按鈕及行號。
檢查預覽的首尾行、縮排、長行和標題，然後下載 PNG。複製圖片若不可用，工具會改為下載。
問答
集中解答常見疑問與容易混淆的問題。
不可以。它只把程式文字排版並輸出圖片；要執行、編譯或排查錯誤，請使用相應的開發環境或檢查工具。
先確認語言選項與程式內容相符。語言選錯或選單未涵蓋的語法可能顯示成一般文字或使用不相符的著色，這不代表程式本身有錯。
目前提供 PNG 匯出，介面可調字號與外邊距，沒有固定寬高欄位。若版面需要指定尺寸，可在匯出後再用圖片編輯工具裁切或縮放。
剪貼簿圖片功能取決於瀏覽器環境；不支援時按鈕會改為下載 PNG。可到下載資料夾確認圖片，或改用下載按鈕。
須知
使用前了解適用範圍、結果限制與必要提醒。
程式碼圖片適合展示，不適合取代可複製的程式碼區塊。W3C 的圖片無障礙教學指出，資訊圖片應有傳達重點的文字替代；若圖片內含文字，替代文字應包含相同文字。分享程式碼截圖時，可在旁邊附原始文字或提供足以理解圖片內容的說明，照顧使用輔助科技、需要搜尋文字或要複製範例的讀者。
匯出前請檢查程式內容及視窗標題是否含有密碼、存取權杖、個人路徑、內部網址或真實客戶資料，並移除不應公開的字串。圖片可能被轉傳，請只分享有權公開的片段。
W3C WAI：Images Tutorial 說明資訊圖片的文字替代原則；核驗日期：2026 年 9 月 30 日。
推薦
查找相關工具、專題與可用的 API 能力。
