Codepng:快速將程式碼轉換為精美圖片,並加入視窗與漸層背景效果

Codepng

Codepng 是一個很好用的線上工具,可以將使用者的程式碼轉為令人驚嘆的圖片,更適合在社群媒體上分享。之前介紹過不少類似工具,例如 CarbonCodeimgRay.so,其實這些工具在使用上差異並不大,而且不只有使用在呈現程式語言內容,想要突顯一篇短文也會很有用,而且不用安裝任何軟體或應用程式,以瀏覽器打開網站即可使用。

Codepng 本身已經內建一些程式碼配色主題,只要打開網站、將程式碼貼上後選擇程式語言類型,再調整一下顏色就可以快速生成圖片,操作上沒什麼難度,比較有趣的是它也提供一些來自 Gradientos 的漸層背景,選取就會自動套入目前預覽,在最短時間內產生圖片,接下來就實際示範 Codepng 操作方式吧!

網站名稱:Codepng
網站鏈結:https://www.codepng.app/

使用教學

輸入要生成的程式碼。

開啟 Codepng 網站後直接編輯上方的程式碼,將預設內容全選、刪除,把要製作成圖片的程式碼貼上,左右兩側還可以調整圖片寬度大小,即使程式碼很長也能正確生成。

Codepng 1.jpg.
選擇佈景主題和程式語言類型。

貼上程式碼後先從左下角「Theme」選擇要帶入的程式碼上色主題,選取後會直接套用。

Codepng 3.jpg.

接著再從「Language」選擇程式語言類型,例如我在這裡使用 Python 做為範例,選好才可以正確標記顏色。

Codepng 4.jpg.
調整背景色和各種外觀選項。

從下方點選「Background」調整背景色,前面有提到 Codepng 收錄一系列 Gradientos 提供的漸層背景,看起來配色很舒服,如果需要也能切換為單色或是自訂漸層背景,最上方還有調整間距的選項。

Codepng 可以調整的選項很多,例如視窗控制(Window Controls)可選擇不同的顏色(左上角按鈕),或是設定行數顏色、編輯器透明度。

Codepng 5.jpg.
匯出圖片。

完成後點選下方「Export PNG」即可將製作後的圖片匯出為 PNG 格式。

Codepng 6.jpg.

值得一試的三個理由:

  • 提供直觀的操作介面,使用者只需貼上程式碼並選擇主題即可快速生成圖片
  • 內建多種配色主題及漸層背景,讓使用者能自由調整,創造出獨特的視覺效果
  • 透過瀏覽器即可使用,方便快捷,不必擔心安裝問題
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6512