如果這個工具幫到了你,可以請作者喝杯咖啡 ☕
將程式碼片段一鍵生成精美截圖,支援多語言高亮和自定義主題。
你什麼時候用得上它?
我們一起來用一段真實的Python程式碼試一試。假設你想分享一個用matplotlib繪製正弦曲線的指令碼。
步驟1:貼上程式碼
在“程式碼內容”輸入框中貼上以下程式碼:
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0, 2*np.pi, 100)
y = np.sin(x)
plt.plot(x, y)
plt.title('Sine Wave')
plt.show()步驟2:選擇程式語言
點選“程式語言”下拉選單,選擇“Python”。工具會自動識別語法並進行高亮。
步驟3:挑選主題
在“主題”下拉選單中,我們選“Monokai Pro”,這是一個暗色系的流行主題,適合程式碼展示。
步驟4:調整外觀
· 字號:保持預設14px
· 背景顏色:保持主題預設(深灰)
· 是否顯示行號:點開開關,設為“是”
· 邊框圓角:設為12px,讓截圖更柔和
步驟5:生成並儲存
點選“生成截圖”按鈕。工具會在右側實時渲染出預覽圖。你可以看到程式碼被高亮、行號清晰、背景漸變、圓角邊框。滿意後點擊“下載PNG”按鈕,一張800×400左右的高畫質截圖就儲存在本地了。
結果解讀:生成的圖片寬度預設自適應程式碼長度,高度根據行數動態調整。我們這張截圖裏,程式碼從第1行到第7行,行號左側有灰色豎線區分,關鍵字(import, def等)顯示為紫色,函式名(np.linspace等)為藍色,字串為綠色。整體視覺效果非常清楚,可以直接用於部落格配圖。
工具的輸出是一張PNG圖片,你可以直接檢視預覽。需要注意幾個關鍵點:
Q1:這個工具支援哪些程式語言?
A:我們內建了30+種語言的語法高亮,包括Python、JavaScript、TypeScript、Java、HTML/CSS、C++、Go、Rust、SQL等。如果列表裡沒有,可能是稀有語言,建議先選“Plain Text”純文字模式。
Q2:生成的圖片背景能透明嗎?
A:可以。在“背景顏色”設定裡選擇“透明”選項(或輸入#00000000),圖片背景就會變成透明,方便你疊加在其他背景上。注意透明背景在深色模式下可能看不清程式碼,需要配合亮色主題使用。
Q3:如何讓截圖帶水印?
A:我們工具本身不加水印。如果你需要保護版權,可以在生成後使用其他圖片編輯工具加文字水印。我們建議直接在圖片角落加個小Logo。
Q4:截圖可以設定固定尺寸嗎?
A:目前工具是自適應尺寸,根據程式碼長度和行數自動生成最佳寬度和高度。如果你需要統一尺寸(比如800×600),可以在下載後用畫圖軟體裁剪或縮放。
Q5:我在移動端能使用嗎?
A:可以。我們的頁面適配手機螢幕,不過由於程式碼輸入和選項較多,建議在平板或電腦上操作體驗更好。手機瀏覽器也能正常生成和下載圖片。