Marmoset 華麗的程式碼擷圖產生器,支援多種程式語言類型、配色特效

Marmoset 華麗的程式碼擷圖產生器,支援多種程式語言類型、配色特效
(Copyright: rawpixel / 123RF Stock Photo

如果你經常逛有的沒的網站,喜歡看電影電視連續劇,應該都曾看過在電腦螢幕上呈現出密密麻麻的程式碼,有一點駭客任務的味道。為了讓原始碼更易於閱讀,一般編輯器都會支援 Syntax Highlight 功能,翻譯成中文就是「語法突顯」,針對不同類型程式碼來加入適當色彩,降低誤讀或誤寫出錯的可能性。

想將自己覺得不錯的程式碼轉成圖片,加入顏色標記效果,聽起來好像有點像是工程師會有的嗜好,但你或許不知道,有免費小工具能幫我們滿足需求。

Marmoset 是一款 Google Chrome 瀏覽器應用程式,功能很簡單,協助你製作華麗的程式碼擷圖!原以為前幾天介紹的 Standardized Screenshot 擷取網頁畫面時自動加入 Mac 外框陰影效果已經夠獨特了,沒想到 Marmoset 比它還炫。

Marmoset

Marmoset 支援多種常見及不常見的程式語言類型,內建大約數十種配色,使用方法很簡單,將你要製作擷圖的程式碼貼入編輯區,選取你要的顏色及特效後,最後將圖片儲存起來就可以了。

擴充功能資訊

元件名稱:Marmoset
適用平台:Chrome
程式語系:英文
安裝頁面:從 Chrome 線上應用程式商店下載

使用教學

開啟 Marmoset 應用程式頁面後,點選「+ 加到 Chrome」藍色按鈕來下載安裝,安裝後就能在「應用程式」裡看到這個功能。

Marmoset

開啟 Marmoset 後,會有一小段預設的程式碼範例,你可以試著從左側修改,右側就會即時更新,顯示你編輯後的字串。

Marmoset

下方有三個選項,由左而右分別為:顏色、程式碼類型及特效

Marmoset

選擇不同的配色和效果後,也會產生完全不一樣的感覺。

Marmoset

比較特別的是 Marmoset 能讓使用者透過拖曳滑鼠的方式轉動程式碼,幾乎是上下左右前後翻轉都能做到,例如下圖我就擷取了一個看起來非常專業的角度,讓程式碼擷圖看起來有那麼一點點厲害(雖然它只是一段 Nginx 設定檔範例)。

Marmoset

最後,點選最右邊的「Save As…」就能將程式碼擷圖輸出,儲存為圖片。

Marmoset

值得一試的三個理由:

  1. 跨平台,透過 Google Chrome 瀏覽器就能使用
  2. 支援多種程式語言類型,可快速切換配色和特效
  3. 可自由拖曳捲動程式碼圖片,讓它看起來更獨特
分享本文