如果你想把一段程式碼製作成圖片，只要從編輯器直接擷圖就能做到，看起來可能略顯陽春，不過好處是該有的都有，內容呈現上也沒什麼問題。若你想讓程式碼擷圖變得更好看，我之前也介紹過一些程式碼轉圖片工具，多半都能加入外框、選擇不同配色和視窗陰影效果，更重要的是會對不同程式語言類型上色，例如：CodeZen、Carbon 將程式碼轉為圖片並加入視窗效果；如果要分享到社群網站，Codeimg 還可依照使用者選擇的平台預先裁切好特定尺寸大小。
原始碼
HTML.cafe 線上即時 HTML 編輯器，修改原始碼立即查看效果變化
現在比較少有機會從頭到尾、以原始碼編寫一個網頁，記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站，最早的網頁就是直接用 HTML 文字編輯器寫出來，後來有了所見即所得編輯器，很多事情變得很方便，也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容，看看呈現出來的結果是否正確，可試試接下來的免費工具。
Diffchecker 2.0 線上程式碼差異比對，也可比較文件、圖片、PDF 檔案
我曾在五年前介紹過 Diff Checker 文件檔案比對工具，後來也成為我喜愛的工具之一，對於經常編寫程式碼的開發者來說透過 Diff 可以協助找出兩個檔案間的差異性，比對原始碼在不同時間版本做過那些異動。雖然 GitHub 或類似的程式庫都已內建此功能，但很多時候我們不想將檔案上傳，一般文字編輯器也有比較兩份文件的功能，不過在操作上我認為還是 Diff Checker 好用。
ToHTML 將程式碼上色轉為 HTML 使用於網頁更易於閱讀
為了讓閱讀程式碼更方便，編輯器通常都會內建高亮（Highlight）功能，上色後讓使用者編寫原始碼更流暢，如果想在網頁上呈現類似效果，WordPress 有外掛程式提供程式碼高亮功能，或是使用 GitHub Gist 服務轉換後貼到網頁上也能達到類似效果。之前曾經介紹過像是「hilite.me 線上將程式碼加上高亮效果，免載入 JavaScript、CSS」可以直接將代碼轉為帶有色彩的 HTML 原始碼，或是使用 Carbon 轉為圖片也很特別。
HEAD 網頁開發參考手冊，收錄 HTML5 在 head 可用標籤及範例說明
httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形
自行架站會遇到各式各樣的狀況，其中很常發生的是要檢查某項功能有沒有正常運作（舉例來說，在 WordPress 網站使用 Cloudflare 外掛建立快取），除了檢查網頁原始碼，大多會透過瀏覽器內建的「開發人員工具」進行各項除錯工作，查看一個網頁究竟載入多少元件檔案，也會檢查相關檔案在使用時從伺服器端回傳的「Response Headers」，這些看起來複雜的資訊代表著某個文件是如何被載入使用，也能找出拖慢網頁速度的原因。
Codeimg 程式碼轉圖片，可自訂視窗陰影效果更適合分享社群網站
如果想把一小段程式碼分享到社群網站，透過 GitHub Gist 產生鏈結是個不錯的方式，或是參考我之前介紹的「5個程式碼分享服務，貼上後立即產生鏈結並加入高亮效果」，若要轉為精美的圖片，我也推薦過 Carbon、CodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具，對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制，接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具，讓你可以做出更適合分享的程式碼圖片。
