Chalkist 免費程式碼轉圖片工具，把原始碼排成美圖不用上傳

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

把程式碼放進簡報、文件或社群貼文，最省事的作法是直接截整合開發環境（IDE）的畫面，但這一截，工作列、分頁標題、跳出來的訊息通知全都會一起入鏡，解析度還是螢幕原樣，投影出去一片糊。Chalkist（網址 chalk.ist）就是專門處理這件小事的工具：把原始碼貼進網頁，挑配色、換背景、標重點，匯出一張乾淨的圖。

它免費、免帳號，原始碼以 MIT 授權公開在 GitHub，作者是波蘭開發者 Kasper Mikiewicz（GitHub 帳號 Idered，個人資料自述任職於 StackBlitz），專案從 2022 年 3 月經營到現在，累積 1,845 顆星。寫技術文章、做開發文件、準備面試作品集或單純想在社群分享一段演算法，只要需要「程式碼以圖片形式出現」，它都派得上用場。實際操作一輪：貼上一段帶中文註解的 Python、換背景、把兩行程式碼標上色帶，匯出的 PNG 有 3392×1504 像素，而且整段過程裡，程式碼沒有離開過瀏覽器。

實測：貼一段 Python，匯出 3392×1504 的 PNG

開啟 chalk.ist 不用註冊，版面是標準的三段式：左側設定側欄、中間畫布、右側預覽。預設的外觀已經有模有樣：深藍紫漸層背景配細小星點、半透明深色圓角視窗、macOS 風格的三顆圓鈕，看起來就像一張可以直接拿去發的圖。畫布上預設放好一段 TypeScript 範例，把游標點進程式碼區、全選、換成自己的內容，預覽會跟著重算。實測貼入的是一段打招呼的 Python 函式，註解寫中文、字串裡也放中文字，匯出後放大檢查，中文字沒有缺字或變成方框，等寬字型的排版整整齊齊。

Pin

匯出只有兩條路：複製到剪貼簿，或下載 PNG 檔（檔名固定是 screenshot.png）。複製這條路很順：點 Copy Image，圖就進剪貼簿，直接貼進通訊軟體、文書處理器或圖片編輯器，省掉存檔再開檔的往返。下載的檔案用圖片工具驗證，尺寸是 3392×1504，等於畫面上 848×376 的預覽直接乘以 4。這個倍率寫在原始碼的匯出函式裡（固定 scale: 4），不是設定選項，好處是不管怎麼調版面，匯出的圖拿去簡報或列印都夠用；代價是沒有 SVG、JPG 或其他格式可以選，也不能調倍率。另外值得一提的是，匯出內容就是畫布上那張卡片本體，側欄與瀏覽器介面不會混進圖裡，不用事後裁切。

Pin

版面控制的即時程度比想像中細：畫布左緣有拖曳把手，可以直接拉出圖片寬度（範圍 320 到 1600 像素）；內距、字級、行距都是滑桿，拉動當下預覽就變，行號要不要顯示也是一個開關。這些全部在瀏覽器裡算，沒有「按了匯出才發現歪掉」的問題。

62 個主題、217 種語言，配色引擎和 VS Code 同源

Chalkist 的語法上色用的是 Shiki 這套開源引擎，簡單說就是把 Visual Studio Code 的主題系統搬進瀏覽器跑，所以你在編輯器裡習慣的配色（One Dark Pro、Night Owl、Nord 這類）大部分都找得到。色彩主題共 62 個，組成在原始碼裡拆得出來：46 個來自 Shiki 內建（31 個深色、15 個淺色），另外 16 個是 Chalkist 自己調的，包括五組雙色調（Duotone）主題。深淺色會連動視窗樣式：選淺色主題時，視窗邊框與背景的搭配會自動換成淺色版，不用自己重配。如果現成配色都不滿意，側欄還有一個自訂主題編輯器，能把關鍵字、字串、註解、函式、變數、運算子、數字等十種語法元素的顏色逐一指定，開啟開關後直接套用在圖上；各主題旁的 Edit 按鈕則是把該主題的配色載入編輯器微調。

語言選單列了 217 種，從常見的 Python、JavaScript、Go，到 Dockerfile、Terraform、Verilog 這類特定用途的都包。要留意的是語言不會自動偵測：每個程式碼區塊的語言是手動指定的，貼入 Python 時標籤仍然停在預設的 TypeScript，上色也就照 TypeScript 的規則走，要正確顯示得自己切換。切換的地方在每個區塊下方的語言下拉選單，同一張圖裡的兩個區塊可以分別設成不同語言，混搭 HTML 加 SQL 的組合沒有問題。

字型有 7 套等寬字可選：Fira Code、Geist Mono、IBM Plex Mono、JetBrains Mono、Nova、Overpass Mono、Source Code Pro，其中 4 套支援連字（把 == 或 => 排成單一符號），有獨立的開關可以關掉。這些字型直接打包在網站裡，而不是每次向 Google 字型庫要，這也是它能做成可安裝網頁應用程式（PWA）的基礎之一：原始碼的快取設定會把字型與指令稿存在本機。

不只單張截圖：區塊、格線與行裝飾

和一般「貼上就出圖」的同類工具相比，Chalkist 比較像一塊小型排版畫布。畫布上可以加兩種區塊：程式碼區塊和 Markdown 區塊，快捷鍵分別是 Ctrl+E 與 Shift+Ctrl+E。Markdown 區塊會把標題、清單渲染成一般文字，裡面用反引號包起來的程式碼片段照樣套用目前主題上色，適合做「說明加程式」的組合圖。每個區塊還能設定佔據的欄寬（2 到 12 欄）與列高（1 到 6 列），把多段程式碼排成格線版面；區塊可以調換順序、可以刪除，程式碼區塊的視窗標題列還能掛一枚自選圖示、寫上檔名，預設的 Untitled 佔位文字換掉之後，圖的說服力又多一分。

行裝飾是另一個順手的功能，有四種：Highlight（整行加色帶）、Focus（聚焦某行、其餘變暗）、Diff Add 與 Diff Remove（標新增與刪除）。操作方式是先從選單切到想用的模式，再點選要標記的行。實測對一段費氏數列程式的第五、六行套用 Highlight，兩行立刻出現貫穿整個視窗寬度的半透明色帶，設定資料裡也確實記錄了這兩行的裝飾；不想一個一個標，選單裡有 Clear 一次清空。拿來在教學圖裡標「看這裡」，或在改版說明裡標出前後差異，比重疊螢光筆的截圖乾淨得多。

Pin

視窗與背景的細節也給得足。視窗樣式深色有 5 款、淺色有 6 款，控制列有 macOS 彩色圓鈕、灰色圓鈕、線框與 Windows 透明四種，透明度、圓角、陰影強度、視窗雜訊都有獨立控制。背景一次給 40 組預設，外加一個自選純色：純色、漸層、品牌色（Vue、Tailwind CSS、Linear）之外，還塞了七隻寶可夢主題色（耿鬼、卡比獸、傑尼龜、妙蛙種子等），背景上可以開粒子星點、倒影和四款陰影疊層。實測換成耿鬼背景，紫色漸層配上細小星點，輸出效果和預覽一致。圖上還能加自訂浮水印文字（含透明度）和社群帳號徽章，帳號欄填好就會以小字綴在圖片角落，放推文或文章時順便帶上出處。

程式碼會被上傳嗎？把對外請求攤開看

這是這類工具最該問的問題，答案是：不會。整段編輯與匯出過程，瀏覽器對外發出的請求只有兩種流量分析。一個是作者自己架在 umami.chalk.ist 的 Umami 分析服務，送出的內容是網站代碼、解析度、語言、頁面標題這類頁面層資料，沒有程式碼內容，而且只有「下載 PNG」和「複製到剪貼簿」兩個動作會被記成事件。分析服務掛在自己網域而不是交給第三方廣告追蹤商，這點對隱私敏感的人有意義：不建立跨站行為紀錄，也沒有廣告 ID。另一個是 Cloudflare 的 Web Analytics，屬於主機端標配的流量統計，不做個人層級追蹤。上色、渲染、匯出全部在瀏覽器裡完成，原始碼也印證了這點：正式版沒有任何把編輯內容送往伺服器的程式路徑在運作。不放心的話，打開瀏覽器開發者工具的網路面板、貼段程式碼自己看，是可以重複驗證的。

有趣的插曲是，原始碼裡留著一組沒上線的伺服器分享功能：兩支 API 負責把分享內容存進資料庫，而且清單端點沒有權限檢查，等於任何人都能列出全部分享內容。這組功能在正式站上已經打不開（API 端點直接 500、分享路徑 404），也就是說目前能用到的 Chalkist 是純瀏覽器版本，這組殘留程式沒有生效。反面解讀是：它沒有「分享連結」功能，別人看不到你的圖，你得自己匯出檔案再貼去別的地方。

你的設定和程式碼存在瀏覽器的本機儲存（localStorage）裡，關掉分頁再開，內容還在，實測重新載入後程式碼一字不差；但換瀏覽器或換電腦就帶不走。救法是預設集（Preset）：側欄的 Create New Preset 按鈕把整套外觀設定存成預設集，側欄會列出所有已存的項目，隨時一套一套切換；每個預設集能產生一條分享網址，設定值以參數打包在網址裡，拿到新環境貼上就能還原，也可以直接把網址傳給同事，讓團隊的程式碼圖長同一張臉。要注意預設集網址帶的是外觀設定，不包括程式碼內容。

和 Ray.so、Carbon 相比，它的差異在排版深度

這個品類不算新：Carbon 是老牌，Ray.so 靠極簡速度走紅（TechMoon 之前寫過 Ray.so 的設定與匯出教學），Codeimage 也是活躍的一員，三個網站目前都正常運作。Chalkist 的差異位置在「排版深度」：多區塊格線、Markdown 區塊、四種行裝飾、自訂主題編輯器，這些是畫布式排版才做得到的功能。如果你的需求是快速把一段程式碼變好看，Ray.so 的流程更短：貼上、調色、匯出就結束；如果要組一張「多段程式碼加說明文字」的圖，Chalkist 的畫布式做法省掉後製。

另外兩篇可以對照著看：想把 Markdown 文章直接變分享圖的，看玉桃文饗軒；想把手邊截圖包成展示圖的，看 Moocup。如果需求是把 Markdown 排進微信公眾號版面，doocs/md 是另一條路。

只有 PNG、沒有分享連結：它的邊界

• 匯出只有 PNG 一種格式，倍率固定 4 倍，想要 SVG 向量圖的話這裡沒有。
• 語言要手動切，不自動偵測；貼了 Python 忘了切，上色會照 TypeScript 的規則走，看不出來的錯誤標色比錯字更麻煩。
• 沒有分享連結，圖片要自己下載再發布；設定綁瀏覽器，跨裝置靠預設集網址搬外觀。
• 專案由單人維護，GitHub 上的最後一次提交停在 2026 年 1 月，內容是把社群連結從 Bluesky 換成 X 這類小修。往前翻紀錄，2025 年 11 月還收過社群幫忙修的拉取請求（大字級時編輯器捲軸的顯示問題），對照網際網路檔案館 2022 年 4 月就有的站點快照，這是個穩定跑了四年多的個人專案。網站還開著、功能完整，18 個開啟中的 issue 沒有人立刻處理，更新節奏就是個人側線專案的節奏。
• 原始碼 MIT 授權、以 Nuxt 3 加 Vue 3 寫成，會部署的人可以整套搬到自己的機器跑；一般使用者直接用線上版即可。

常見問題

Chalkist 免費嗎？有沒有帳號或額度限制？

免費，不用註冊，實測全程沒有碰到任何額度或付費提示。網站上有 GitHub 連結與 Buy Me a Coffee 贊助入口，除此之外沒有商業化痕跡。

我的程式碼會被存到伺服器嗎？

不會。編輯與匯出都在瀏覽器完成，對外請求只有兩個流量分析端點，送的都是頁面層資料，不含程式碼。原始碼裡那組會存資料庫的分享 API 沒有上線。

能輸出 SVG 或更高解析度嗎？

只有 PNG，固定 4 倍解析度。以 848 像素寬的版面來說就是 3392 像素寬的輸出，簡報與列印都夠；需要向量格式的話得找別的工具。

換電腦設定會跟著走嗎？

設定存在瀏覽器本機儲存，不會自動同步。把常用外觀存成預設集、用分享網址搬到另一台，是最接近同步的作法。

可以離線用或自己架嗎？

原始碼公開、以 Nuxt 3 寫成，會部署的人可以自己架一套。線上版的原始碼裡有 PWA 安裝設定，字型與指令稿會存在本機，裝成應用程式後這些資源不必重新下載；首次載入仍然需要網路。

整體來說，Chalkist 把「程式碼截圖」這件小事做得比想像中講究：主題、語言、字型的基本盤都在水準上，多區塊排版和行裝飾是同類工具裡少見的深度，而全程不上傳的處理方式，讓貼上還沒公開的程式碼時不必猶豫。它的邊界也清楚：輸出只有 PNG、沒有雲端分享、維護靠一個人的空檔。對大多數人，打開網頁貼上程式碼、調一輪外觀、按 下載 PNG，三分鐘內就能拿到一張放進簡報不丟臉的圖；要更複雜的排版需求，它的區塊畫布也接得住。要一張好看的程式碼圖，它是值得先開來試的那一個。