Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果

Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果

如果你想把一段程式碼製作成圖片,只要從編輯器直接擷圖就能做到,看起來可能略顯陽春,不過好處是該有的都有,內容呈現上也沒什麼問題。若你想讓程式碼擷圖變得更好看,我之前也介紹過一些程式碼轉圖片工具,多半都能加入外框、選擇不同配色和視窗陰影效果,更重要的是會對不同程式語言類型上色,例如:CodeZenCarbon 將程式碼轉為圖片並加入視窗效果;如果要分享到社群網站,Codeimg 還可依照使用者選擇的平台預先裁切好特定尺寸大小。

ToHTML 將程式碼上色轉為 HTML 使用於網頁更易於閱讀

ToHTML 將程式碼上色轉為 HTML 使用於網頁更易於閱讀
Copyright : Yurii Tymchuk / 123RF Stock Photos

為了讓閱讀程式碼更方便,編輯器通常都會內建高亮(Highlight)功能,上色後讓使用者編寫原始碼更流暢,如果想在網頁上呈現類似效果,WordPress 有外掛程式提供程式碼高亮功能,或是使用 GitHub Gist 服務轉換後貼到網頁上也能達到類似效果。之前曾經介紹過像是「hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS」可以直接將代碼轉為帶有色彩的 HTML 原始碼,或是使用 Carbon 轉為圖片也很特別。

Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站

Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站

如果想把一小段程式碼分享到社群網站,透過 GitHub Gist 產生鏈結是個不錯的方式,或是參考我之前介紹的「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,若要轉為精美的圖片,我也推薦過 CarbonCodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具,對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制,接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具,讓你可以做出更適合分享的程式碼圖片。

Pasted.co 免費文字分享服務,將內容貼上即可轉為短網址分享

Pasted.co 免費文字分享服務,將內容貼上即可轉為短網址分享

早期有一種免費服務很受歡迎,將一大串文字、鏈結或程式碼貼上即可產生短網址的文字分享工具,或許是因為以前即時通訊軟體對於訊息字數有限制,或是一些資訊無法正常在 BBS 或討論區交流,必須換個方式加上密碼保護,事實上現在也比較少人使用了,唯獨縮網址依然有一定的使用率(畢竟現在使用 Ptt 的朋友還是很多)。如果想快速建立一個其他人可以看到內容的簡易網頁,我推薦使用 TelegraphItty bitty 可快速產生網頁,或是將 Email 寄到指定信箱就能轉為網址的 Publishthis.email 都非常好用。

CodeZen 將程式碼轉為 JPG、PNG 圖片,上色後加入視窗及陰影效果

CodeZen 將程式碼轉為 JPG、PNG 圖片,上色後加入視窗及陰影效果

如果要呈現一段程式碼,通常會加入更易於閱讀的色彩效果,這在網頁裡不難做到,甚至大多數編輯器都已經內建上色功能,對於不支援 JavaScript 的平台來說也有像是 hilite.me 工具可以轉換。假如你是要讓程式碼呈現在簡報或紙本中,製作成圖片或許是個不錯的方法,之前介紹過「Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目」是一款可將程式碼轉為圖片格式的線上工具,還能加入色彩、陰影和視窗外框,讓一段枯燥無味的程式碼更吸引人。

hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS

hilite.me
(Copyright: simpson33 / 123RF Stock Photo

前幾天剛介紹過「Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目」,Carbon 是相當有趣的程式碼運用,除了提升擷圖質感、讓原始碼更易於閱讀,最大用途是當你要分享程式碼到社群網站,做成圖片效果會更為理想。圖片的缺點是無法直接複製,還是必須附上純文字內容,但不是每個平台都支援顯示原始碼,而且也可能因為編輯器或安全問題導致程式碼無法完整顯示。

Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目

Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目

如果要在網路上分享程式碼(Source Code),通常你會怎麼做呢?若是自己的網站、部落格那還好解決,通常只要將程式碼貼上,搭配高亮效果(Highlight)就能將代碼上色,加入行數等等,看起來更專業也更好閱讀;假如要分享到社群網站,或者你使用的網誌平台不支援貼上程式碼,就必須借助第三方服務幫忙,我在「5 個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」介紹過類似服務,其中較常使用的是 GitHub Gist。

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

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

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

Pastery 更簡單的 Pastebin!一鍵分享內嵌程式碼或文字內容服務

Pastery 更簡單的 Pastebin!一鍵分享內嵌程式碼或文字內容服務

很多人都聽過 Pastebin,號稱原始碼儲存分享始祖,2002 年開始提供服務,如果你時常在網路上查找資料,可能曾經看過或使用過類似平台。後來有不少文字分享工具應運而生,但大多都大同小異,最近發現一個名為「Pastery」的文字分享服務,網頁整體介面設計相較於原始的 Pastebin 更為乾淨簡單,可以讓你快速在線上共享文字或程式碼。

CodePile 線上快速分享程式碼,支援多人協作即時編輯

CodePile 線上快速分享程式碼,支援多人協作即時編輯
(Copyright: photovibes / 123RF Stock Photo

想在網路上共享程式碼,你有許多選擇,你可以直接透過 Email 或即時通訊軟體來發送給對方,但這會非常不易閱讀。之前我介紹過「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,提供了一些常用的網路工具選擇,不但方便,而且會對程式碼加入顏色效果,使得閱讀上更為輕鬆。