Code Screenshot Generator

產生具語法醒目提示的程式碼截圖,並匯出為 SVG、PNG、JPEG、WebP 或 HTML。

程式碼
貼上你想轉成圖片的程式碼片段。
語法
選擇醒目提示、語言偵測與色彩主題。
算繪
背景
設定程式碼卡片後方的畫布。
背景模式
視窗
選擇外框控制項與行號樣式。
視窗樣式
版面
調整間距、字級、圓角與 Tab 寬度。

Code Screenshot Generator

What it does

Code Screenshot Generator 會將貼上的程式碼片段轉成精緻的程式碼卡片,可匯出為 SVG、PNG、JPEG、WebP 或獨立 HTML。它會在你的瀏覽器中執行,套用可選主題的語法醒目提示,並讓你在下載前調整外框。

When to use it

適合用於說明文件圖片、版本資訊、部落格文章、簡報、社群預覽,以及需要用樣式化程式碼片段讓內容比純文字更容易瀏覽的錯誤回報。SVG 與 HTML 匯出在文件中能保持清晰,而 PNG、JPEG 與 WebP 則適合需要點陣圖片的工具。

How to get a clean export

選擇最接近的語言,或保留自動語言偵測,接著挑選對目標用途有足夠對比的主題。當程式碼片段會在討論中被引用時,請保留行號;若你需要可放入其他設計的透明素材,請停用外層背景。

Privacy and limitations

程式碼片段會在頁面本機處理,不會由此工具上傳。非常大的檔案可能讓醒目提示與點陣匯出變慢,因此匯出前請將片段裁切到你想展示的行數。