
為了讓閱讀程式碼更方便,編輯器通常都會內建高亮(Highlight)功能,上色後讓使用者編寫原始碼更流暢,如果想在網頁上呈現類似效果,WordPress 有外掛程式提供程式碼高亮功能,或是使用 GitHub Gist 服務轉換後貼到網頁上也能達到類似效果。之前曾經介紹過像是「hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS」可以直接將代碼轉為帶有色彩的 HTML 原始碼,或是使用 Carbon 轉為圖片也很特別。
免費資源指南,每日網路資訊與科技新知
by Pseric
為了讓閱讀程式碼更方便,編輯器通常都會內建高亮(Highlight)功能,上色後讓使用者編寫原始碼更流暢,如果想在網頁上呈現類似效果,WordPress 有外掛程式提供程式碼高亮功能,或是使用 GitHub Gist 服務轉換後貼到網頁上也能達到類似效果。之前曾經介紹過像是「hilite.me 線上將程式碼加上高亮效果,免載入 JavaScript、CSS」可以直接將代碼轉為帶有色彩的 HTML 原始碼,或是使用 Carbon 轉為圖片也很特別。
by Pseric
如果想把一小段程式碼分享到社群網站,透過 GitHub Gist 產生鏈結是個不錯的方式,或是參考我之前介紹的「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,若要轉為精美的圖片,我也推薦過 Carbon、CodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具,對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制,接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具,讓你可以做出更適合分享的程式碼圖片。
by Pseric
如果要呈現一段程式碼,通常會加入更易於閱讀的色彩效果,這在網頁裡不難做到,甚至大多數編輯器都已經內建上色功能,對於不支援 JavaScript 的平台來說也有像是 hilite.me 工具可以轉換。假如你是要讓程式碼呈現在簡報或紙本中,製作成圖片或許是個不錯的方法,之前介紹過「Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目」是一款可將程式碼轉為圖片格式的線上工具,還能加入色彩、陰影和視窗外框,讓一段枯燥無味的程式碼更吸引人。
by Pseric
前幾天剛介紹過「Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目」,Carbon 是相當有趣的程式碼運用,除了提升擷圖質感、讓原始碼更易於閱讀,最大用途是當你要分享程式碼到社群網站,做成圖片效果會更為理想。圖片的缺點是無法直接複製,還是必須附上純文字內容,但不是每個平台都支援顯示原始碼,而且也可能因為編輯器或安全問題導致程式碼無法完整顯示。
by Pseric
如果要在網路上分享程式碼(Source Code),通常你會怎麼做呢?若是自己的網站、部落格那還好解決,通常只要將程式碼貼上,搭配高亮效果(Highlight)就能將代碼上色,加入行數等等,看起來更專業也更好閱讀;假如要分享到社群網站,或者你使用的網誌平台不支援貼上程式碼,就必須借助第三方服務幫忙,我在「5 個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」介紹過類似服務,其中較常使用的是 GitHub Gist。
by Pseric
若你有接手編輯過他人網頁,或是複製其他頁面版型的經驗,應該會發現最困難的往往不是編輯網站,而是將現有的程式碼整理乾淨,讓它能夠格式化,呈現出一致的效果。尤其對於一些較為複雜的頁面,可能經過許多人無數次編輯後已經有些四不像,這時候就必須將不必要的部份代碼刪除,只留下最基本的部分,而這些過程大部分都是手動進行,不但很耗費時間心力,而且很可能因為修改錯誤而讓整個頁面跑掉。
by Pseric
by Pseric
by Sophina