Codepng 是一個很好用的線上工具,可以將使用者的程式碼轉為令人驚嘆的圖片,更適合在社群媒體上分享。之前介紹過不少類似工具,例如 Carbon、Codeimg 和 Ray.so,其實這些工具在使用上差異並不大,而且不只有使用在呈現程式語言內容,想要突顯一篇短文也會很有用,而且不用安裝任何軟體或應用程式,以瀏覽器打開網站即可使用。
Codepng 本身已經內建一些程式碼配色主題,只要打開網站、將程式碼貼上後選擇程式語言類型,再調整一下顏色就可以快速生成圖片,操作上沒什麼難度,比較有趣的是它也提供一些來自 Gradientos 的漸層背景,選取就會自動套入目前預覽,在最短時間內產生圖片,接下來就實際示範 Codepng 操作方式吧!
網站名稱:Codepng
網站鏈結:https://www.codepng.app/
使用教學
開啟 Codepng 網站後直接編輯上方的程式碼,將預設內容全選、刪除,把要製作成圖片的程式碼貼上,左右兩側還可以調整圖片寬度大小,即使程式碼很長也能正確生成。
貼上程式碼後先從左下角「Theme」選擇要帶入的程式碼上色主題,選取後會直接套用。
接著再從「Language」選擇程式語言類型,例如我在這裡使用 Python 做為範例,選好才可以正確標記顏色。
從下方點選「Background」調整背景色,前面有提到 Codepng 收錄一系列 Gradientos 提供的漸層背景,看起來配色很舒服,如果需要也能切換為單色或是自訂漸層背景,最上方還有調整間距的選項。
Codepng 可以調整的選項很多,例如視窗控制(Window Controls)可選擇不同的顏色(左上角按鈕),或是設定行數顏色、編輯器透明度。
完成後點選下方「Export PNG」即可將製作後的圖片匯出為 PNG 格式。
值得一試的三個理由:
- 提供直觀的操作介面,使用者只需貼上程式碼並選擇主題即可快速生成圖片
- 內建多種配色主題及漸層背景,讓使用者能自由調整,創造出獨特的視覺效果
- 透過瀏覽器即可使用,方便快捷,不必擔心安裝問題