程式碼截圖

把程式碼產生帶語法高亮的精美圖片

檔案不會離開你的裝置
在瀏覽器本機執行
免費、免註冊、無浮水印

程式碼

預覽

點擊預覽中的某一行即可醒目標示該行。

正在載入語法上色…

如何使用程式碼截圖

把程式碼變成帶語法上色、視窗外框、主題和背景的圖片，可下載 PNG、SVG 或複製到剪貼簿。支援 27 種語言與純文字，能自動偵測語言，上色在瀏覽器中完成。

把程式碼貼到「程式碼」框中，或點「範例」先看看效果。

「語言」保持「自動偵測」或手動選擇，並在「標題」填寫檔名等資訊。

在「醒目標示行」輸入要強調的行（如 3, 5-7），也可以直接點擊預覽中的行；需要時開啟「淡化其他行」。

在「外觀」和「背景」中選擇「主題」、「視窗樣式」（macOS、Windows 或無）、字級、漸層或純色背景以及邊距。

在「匯出」中設定「寬度」和「解析度」，然後點「下載 PNG」、SVG 或「複製圖片」。

常見問題

程式碼會被傳送到伺服器嗎？

不會。上色與繪製都在瀏覽器中完成。不過工具會把上次的程式碼和設定存在本瀏覽器的本機儲存空間，在公用電腦上用完請點「清除」。

支援哪些語言和主題？

支援 JavaScript、TypeScript、Python、Java、Go、Rust、C、C++、C#、PHP、Ruby、Swift、Kotlin、Dart、Scala、Lua、SQL、Shell、PowerShell、JSON、YAML、HTML / XML、CSS、SCSS、Markdown、Dockerfile、Diff 以及純文字。主題有 One Dark、GitHub Dark、GitHub Light、Dracula、Nord、Monokai、Solarized Dark 和 Solarized Light。

PNG 和 SVG 有什麼差別？

PNG 是 1×、2× 或 3× 解析度的點陣圖。SVG 中的程式碼保留為可選取的文字，放大也清晰，但顯示時使用開啟它的裝置上已安裝的字型。

程式碼行太長，圖片變得很寬怎麼辦？

把「寬度」改為「固定」，在「圖片寬度」填入 320 到 4000 像素之間的值，過長的行會自動換行。

背景可以是透明的嗎？

可以。在「背景」選「透明」，再下載 PNG 或 SVG。

它和「裝置樣機與截圖美化」有什麼不同？

本工具把你貼上的程式碼當作文字排版繪製。如果要幫既有的 App 或網頁截圖加上外框，請使用「裝置樣機與截圖美化」。

如何使用程式碼截圖

把程式碼貼到「程式碼」框中，或點「範例」先看看效果。

「語言」保持「自動偵測」或手動選擇，並在「標題」填寫檔名等資訊。

在「醒目標示行」輸入要強調的行（如 3, 5-7），也可以直接點擊預覽中的行；需要時開啟「淡化其他行」。

在「外觀」和「背景」中選擇「主題」、「視窗樣式」（macOS、Windows 或無）、字級、漸層或純色背景以及邊距。

在「匯出」中設定「寬度」和「解析度」，然後點「下載 PNG」、SVG 或「複製圖片」。

常見問題

程式碼會被傳送到伺服器嗎？

不會。上色與繪製都在瀏覽器中完成。不過工具會把上次的程式碼和設定存在本瀏覽器的本機儲存空間，在公用電腦上用完請點「清除」。

支援哪些語言和主題？

PNG 和 SVG 有什麼差別？

PNG 是 1×、2× 或 3× 解析度的點陣圖。SVG 中的程式碼保留為可選取的文字，放大也清晰，但顯示時使用開啟它的裝置上已安裝的字型。

程式碼行太長，圖片變得很寬怎麼辦？

把「寬度」改為「固定」，在「圖片寬度」填入 320 到 4000 像素之間的值，過長的行會自動換行。

背景可以是透明的嗎？

可以。在「背景」選「透明」，再下載 PNG 或 SVG。

它和「裝置樣機與截圖美化」有什麼不同？

本工具把你貼上的程式碼當作文字排版繪製。如果要幫既有的 App 或網頁截圖加上外框，請使用「裝置樣機與截圖美化」。