Codeimg.io:將程式碼美化後以視窗風格輸出成圖檔
2019/09/13
萌芽站長
2,564 0
網路應用
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
「Codeimg.io」是一個可以幫助您將程式碼美化後以視窗風格輸出成圖檔的英文網站,視窗風格有 Windows 及 MacOS 兩種系統的風格可以選擇,目前還是測試版,因此可能會有些錯誤與需要改進的部分,不過現有的功能已經可以滿足不少人的需求,重點是完全免費!
進入該網站後會先選擇樣板,這就看你是要將程式碼展示於何種社群媒介,如果是 Facebook 貼文,就可以選擇「Facebook 1200x630」那項,當然也可以選「Custom」客製化,然後可以選擇輸出格式與名稱,支援 JPEG、PNG 及 SVG,如果要有透明度請選後兩者,進入編輯畫面後,左側為細項調整區,有畫框、視窗及編輯器三個部分可以設定,右側大區塊是編輯預覽區,可以貼上要轉換成圖檔的程式碼,標題也可以直接改。最後點右上方「📥 Download」就可以把圖下載回自己的裝置中使用啦!

▲ 一開始進入可以選擇樣板,這是畫框的大小,可以客製化,記得選擇輸出圖檔格式(預設為 JPEG)。
▲ 左側欄位有超多細項可以設定,如:畫框大小、視窗風格、視窗圓角與陰影等,右側編輯區可以放入程式碼及修改標題。

▲ 編輯器也有非常多風格可以挑選,字體大小可以更改,比較可惜沒有辦法改字體。程式語言方面選「Auto」基本上就可以了!

▲ 最後輸出 PNG 的結果,不知道為何中文字體會變成新細明體,且出現怪異的卷軸,這部分如果您不在意的話這個工具真的挺好用!
贊助廣告 ‧ Sponsor advertisements
DesignCap:線上平面設計工具,擁有數千個專業範本與數百萬張圖形資源!
📆 2020-07-27
📁
多媒體, 網路應用, 靜圖處理
Microsoft Copilot:生成透明 PNG 去背服裝圖,AI 換裝前處理之超實用技巧
📆 2025-09-07
📁
網路應用, 人工智慧, AI繪圖
Mage Space:想像力就是您的超能力!線上輸入提詞讓 AI 畫出您的想像!
📆 2022-10-14
📁
網路應用, 人工智慧, AI繪圖
CodeZen:將程式碼、原始碼加上標記顏色後輸出成 JPG or PNG
📆 2018-10-17
📁
網路應用
Cloudflare SSL Test:測試網站 SSL 是否正確
📆 2019-02-28
📁
網路應用, 網站技術
Global DNS Propagation Checker:檢查全球 DNS 傳播、生效狀態
📆 2018-08-20
📁
網路應用, 網站技術, 架站資源
Google AdSense:廣告封鎖復原,讓訪客按一下就將貴站加入廣告阻擋器白名單
📆 2023-02-24
📁
網路應用, 網站技術
Online HTML Editor:線上網頁原始碼編輯器、文本轉網頁原始碼
📆 2019-01-27
📁
網路應用, 網站技術, HTML
留言區 / Comments
萌芽論壇