程式碼截圖

相似CSS 與設計

視覺化設計線性、放射、圓錐漸層，即時複製 CSS 程式碼

即時預覽玻璃擬態效果，一鍵複製 CSS 程式碼

互動式調整陰影效果，即時預覽 CSS 輸出

?

還沒有留言，搶先留下你的想法！

把程式碼片段轉成排版整齊的分享圖片，可選擇語言、主題、視窗樣式與背景，並下載 PNG，適合貼到簡報、文件或社群。

將程式碼貼入下方輸入框，並在上方「語言」選擇對應語言（JavaScript / TypeScript / Python / CSS / HTML / JSON / Bash / SQL / Rust / Go），語法關鍵字、字串、注解會自動上色。
「主題」提供 6 種配色：Dracula（深紫）、One Dark（灰黑）、GitHub Light（白底）、Solarized（深藍）、Nord（北歐冷）、Monokai（經典黃綠）。
「視窗樣式」開啟後會顯示 macOS 紅黃綠三顆圓鈕，讓截圖更貼近真實編輯器外觀；「行號」可單獨開關。
「外框間距」滑桿調整程式碼區塊與背景漸層之間的留白（16～80px）；「背景」可選 5 種漸層或透明（無背景）。
預覽區確認滿意後，點右上角「下載 PNG」即可取得 2× 高解析度圖片，適合貼到 Twitter／LinkedIn／技術文章；「複製程式碼」則複製純文字內容。

程式碼截圖支援哪些語言？

支援 JavaScript、TypeScript、Python、HTML、CSS、JSON、SQL、Bash、Java、Go 等語法高亮。

匯出的截圖是什麼格式？

PNG 格式（2× 高解析度），適合部落格、簡報、社群媒體分享。

可以自訂背景色和視窗樣式嗎？

可以，提供多種色彩主題、macOS/無框視窗樣式、背景色/漸層、行號、外框間距等設定。