Claude Code 是基於終端機的人工智慧編碼助理，會在主控台輸出純文字，並不會原生渲染圖片。若要將 Claude Code 產生的程式碼片段轉成可分享的 PNG，請把完整的程式碼文字貼到 程式碼轉圖片產生器，選擇淺色或深色主題，設定 12 到 32 像素之間的字型大小與 16 到 96 像素之間的邊距，然後下載產生的 code-image.png。整個流程都在目前的瀏覽器分頁中針對靜態文字執行，因此原始碼不會被剖析、編譯、求值、語法標記，或傳送到遠端伺服器，而匯出的 PNG 儲存的是已渲染的像素，而非可編輯的原始碼。輸入上限為 50,000 個 UTF-16 程式碼單位、200 個邏輯行、單行 2,000 個程式碼單位、Canvas 每邊 8,192 像素、Canvas 總像素 32,000,000，以及 20 MiB 的 PNG，超過上限的輸入會以明確錯誤訊息拒絕，而不是靜默裁切或部分渲染。
為什麼 Claude Code 的輸出需要額外的圖片步驟
Claude Code 以互動式終端代理的形式運作。它的回應會以文字形式出現在 shell 中：檔案差異、指令建議、完整函式、規則運算式樣式、SQL 查詢、設定區塊，以及小型腳本。這些文字在終端機內本身都不會變成圖片。當開發人員想將其中一段片段放進 pull request 說明、Notion 頁面、Confluence 文章、部落格文章、Stack Overflow 解答、推文、簡報，或無法妥善呈現等寬程式碼區塊的聊天對話時，PNG 是最便於流通的容器。
擷取終端機視窗是一種做法，但它會一併擷取周圍的提示字元、游標、視窗外觀、你的配色主題，以及當下捲過的無關行。另一種做法是從終端機複製程式碼，貼到專門的渲染工具，讓該工具產生邊界緊密、字型與邊距可控的圖片。程式碼轉圖片產生器正是為第二種路徑所打造：單一瀏覽器分頁接收一段靜態文字，在 Canvas 上繪製後交還一張 PNG，全程不離開你的機器。
程式碼轉圖片產生器內部：本機 PNG 渲染
這個工具完全在你目前的瀏覽器分頁中執行。不會上傳任何東西，不會呼叫外部渲染器，也不會載入任何語法標記文法或語言執行環境。唯一的輸入是你貼上的文字，加上三個固定控制項：主題（淺色或深色）、字型大小（12 到 32 之間的整數像素）、以及邊距（16 到 96 之間的整數像素）。
在底層，瀏覽器會被要求在 Canvas 上下文設定本機等寬字型堆疊。你貼上的每一個完整行都會以設定的字型進行測量，最寬的有限測量值會向上取整為自然的像素範圍，Canvas 會以該寬度加上左右邊距進行尺寸設定。高度計算方式是將字型大小乘以一點五後向上取整，再乘以完整的邏輯行數，最後加上上下邊距。Canvas 重新調整大小後，會再次取得其繪製上下文，以便明確重新套用字型、基準線、對齊、方向、字距、背景與前景。先繪製不透明背景，再從相同的邊距位置、由上基準線開始向左對齊繪製每一個保留的行。空白行仍會佔滿一整列。完成的點陣圖會以 image/png 編碼，並透過本機的 Object URL 釋出，該 URL 在編輯、替換、逾時完成或卸載時會被頁面撤銷。
由於 Canvas 僅填入文字與實心顏色，它沒有跨來源圖片來源，也不會因為這個工作流程而受到污染。每一個步驟——包括測量、繪製、PNG 編碼、預覽與下載——都在本機進行。
用三個步驟從 Claude Code 產生 PNG
- 在字元、行與單行的限制範圍內，貼上完整的靜態程式碼文字。本工具僅將輸入視為文字，因此 HTML 標籤、看起來像腳本的字串、事件處理常式文字、樣板表達式、引號、& 符號與角括號都會保持為一般字形，絕不會被指派給 innerHTML 或插入為 DOM 標記。
- 選擇淺色或深色主題、12 到 32 像素之間的字型大小，以及 16 到 96 像素之間的邊距，然後產生邊界緊密的自然尺寸 PNG。瀏覽器會重新調整離屏 Canvas 的大小、繪製背景、使用 CanvasRenderingContext2D.fillText 繪製每一行（如 MDN fillText 參考文件 所述），並以非同步方式編碼點陣圖。
- 檢查預覽、實際的 Canvas 尺寸、行數與 PNG 位元組大小，然後下載 code-image.png。下載的檔案來自自然尺寸的離屏 Canvas，因此不會被靜默縮取樣以符合頁面；畫面上的預覽僅受 CSS 的顯示限制。
輸入限制與拒絕規則
本工具會預先強制執行嚴格的限制，讓過大的請求乾淨地失敗，而不是產生局部影像。具體的臨界值由實作定義，並視為驗收條件：超過下一個單位、行、邊緣像素、總像素或位元組的輸入會被拒絕。
| 資源 | 接受上限 |
|---|---|
| 總輸入 | 50,000 UTF-16 程式碼單位 |
| 邏輯行 | 200 |
| 單行長度 | 2,000 程式碼單位 |
| Canvas 寬度或高度 | 8,192 像素 |
| Canvas 總面積 | 32,000,000 像素 |
| PNG Blob 大小 | 20 MiB |
不允許的控制字元與未成對的 Unicode 代理項會以明確錯誤訊息拒絕，而不是被靜默替換或丟棄。LF、CRLF 與 CR 會被辨識為行分隔符號，空行與結尾的最終換行會保留為影像列，Tab 與可列印的 Unicode 則原封不動地傳遞給 Canvas 文字渲染器。可接受的文字絕不會被靜默縮短；不會自動箝制、略過行數、裁切區域、產生局部影像、以較低解析度重試，或靜默重新壓縮。無效或零位元組的 PNG 輸出同樣會被拒絕。
尺寸計算範例
假設你從 Claude Code 工作階段貼了一段 50 行的片段，並選擇 16 像素的字型大小與 32 像素的邊距。行高為字型大小乘以 1.5 後向上取整，也就是 ceil(24) = 每行 24 像素。行的垂直總長為 24 × 50 = 1,200 像素。加入上下邊距後，在任何文字測量之前，總高度為 1,200 + 32 + 32 = 1,264 像素。寬度則是最寬的一行在本機等寬字型下測得的結果向上取整，再加上兩側各 32 像素的邊距。對這個輸入而言，兩個維度都遠低於 8,192 像素邊緣與 32,000,000 像素面積的預算，因此 PNG 在編碼時不會觸發面積或邊緣保護機制。
輸出 PNG 在不同裝置上的表現
瀏覽器會從本機可用字型解析宣告的 ui-monospace、SFMono-Regular、Menlo、Consolas 與通用等寬字型堆疊。這代表字型回退與字形外觀會因作業系統而異。相同的瀏覽器與字型環境對相同的輸入與選項應能產生穩定的測量結果，但無法保證跨電腦的像素級完全一致。表情符號、少見的字元集、連字、抗鋸齒、字型提示與回退字型都可能改變測量寬度或點陣化字形邊緣。輸出結果摘要會報告實際指派給輸出 Canvas 的尺寸，因此你能在分享前確認檔案內容。
若你需要像素級完全一致，請在將檢視 PNG 的同一台機器與同一個瀏覽器上擷取它；若跨裝置的一致性至關重要，也請在接收端的機器上重新執行本工具。CanvasRenderingContext2D.measureText——也就是底層的測量基礎元件——的說明請參閱 MDN measureText 參考文件。
什麼時候 PNG 是合適的格式
PNG 適用於精簡的視覺分享：說明文件插圖、issue 報告、教學素材與社群貼文。它不是程式碼編輯器、編譯器、沙箱、密鑰掃描器、語法驗證器、格式化工具、OCR 系統，也不是可選取原始碼的無障礙替代方案。PNG 儲存的是已渲染的像素，而非可編輯的原始文字、語法結構、字型檔、執行階段輸出或執行結果。它無法證明程式碼正確、安全、合乎授權、格式化正確或可執行，因此在分享 PNG 前，請檢查程式碼中是否有憑證、權杖、私密 URL 與個人資訊；當可編輯性、精確字元還原、審查紀錄、無障礙或保存完整性很重要時，請另外保存原始文字。
針對機器可讀的格式化，本機瀏覽器也提供專門往返處理原始文字的工具：JSON 格式化工具 處理 JSON、HTML 格式化工具處理 HTML、CSS 壓縮工具處理 CSS，以及 JavaScript 壓縮工具處理 JavaScript。那些工具會保留可選取、可編輯的原始碼，而程式碼轉圖片產生器則刻意捨棄原始碼，改為輸出平面化的 PNG。
延伸閱讀：產生 ANSI 顏色代碼並複製原始 SGR 序列。
延伸閱讀：ANSI 跳脫代碼：SGR 參數格式與安全處理。