如果你想把一段程式碼製作成圖片，只要從編輯器直接擷圖就能做到，看起來可能略顯陽春，不過好處是該有的都有，內容呈現上也沒什麼問題。若你想讓程式碼擷圖變得更好看，我之前也介紹過一些程式碼轉圖片工具，多半都能加入外框、選擇不同配色和視窗陰影效果，更重要的是會對不同程式語言類型上色，例如：CodeZen、Carbon 將程式碼轉為圖片並加入視窗效果；如果要分享到社群網站，Codeimg 還可依照使用者選擇的平台預先裁切好特定尺寸大小。
程式碼
HTML.cafe 線上即時 HTML 編輯器，修改原始碼立即查看效果變化
現在比較少有機會從頭到尾、以原始碼編寫一個網頁，記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站，最早的網頁就是直接用 HTML 文字編輯器寫出來，後來有了所見即所得編輯器，很多事情變得很方便，也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容，看看呈現出來的結果是否正確，可試試接下來的免費工具。
Monkeytype 超專業線上英打練習服務，設定模式產生打字速度結果
一直以來都在嘗試各種不同鍵盤帶來的手感，從 Filco、Realforce 一路打到 Leopold，剛好最近看到一篇 PTT 網友開箱文，在測試鍵盤打字時就錄製一段敲打影片，當然主要也是讓大家聽聽看鍵盤的聲音，很好奇在試打鍵盤時應該要用什麼方法測試比較準確呢？不外乎需要一段可以看著輸入的內容，這時候就能考慮使用打字練習工具，讓你在輸入時可以知道自己按下按鍵是否正確，或是測試自己的英打速度。
Dev Fonts 適合開發者的免費字型下載，線上套用字型預覽程式碼效果
一般的純文字編輯器不一定適合編寫程式碼，透過專業的程式碼編輯工具可針對程式語言上色，在閱讀時更省力，也減少因為誤判造成的問題，最重要的是使用等寬字型（Monospaced Font）閱讀程式碼，有一些字型專門為程式碼編輯器或終端機工具設計，像是微軟的 Cascadia Code、JetBrains Mono、Iosevka 或是 Hack 等等，或許你也有自己慣用的等寬字型。如果想找找其他選項，Programming Fonts 收錄 50 種最適合寫程式的字型也能線上比較。
Diffchecker 2.0 線上程式碼差異比對，也可比較文件、圖片、PDF 檔案
我曾在五年前介紹過 Diff Checker 文件檔案比對工具，後來也成為我喜愛的工具之一，對於經常編寫程式碼的開發者來說透過 Diff 可以協助找出兩個檔案間的差異性，比對原始碼在不同時間版本做過那些異動。雖然 GitHub 或類似的程式庫都已內建此功能，但很多時候我們不想將檔案上傳，一般文字編輯器也有比較兩份文件的功能，不過在操作上我認為還是 Diff Checker 好用。
ToHTML 將程式碼上色轉為 HTML 使用於網頁更易於閱讀
為了讓閱讀程式碼更方便，編輯器通常都會內建高亮（Highlight）功能，上色後讓使用者編寫原始碼更流暢，如果想在網頁上呈現類似效果，WordPress 有外掛程式提供程式碼高亮功能，或是使用 GitHub Gist 服務轉換後貼到網頁上也能達到類似效果。之前曾經介紹過像是「hilite.me 線上將程式碼加上高亮效果，免載入 JavaScript、CSS」可以直接將代碼轉為帶有色彩的 HTML 原始碼，或是使用 Carbon 轉為圖片也很特別。
Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊（Chrome 擴充功能）
通常在網站流量出現變化時網站管理者會去探究原因，如果你的訪客多為來自搜尋引擎的自然流量，有很大機會是搜尋引擎排名下降或類似問題，當然各家公司使用的演算法技術是商業機密，但通常都圍繞著一些大原則，像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書，當中有提到使用正確語法清楚表達網頁資訊。
JetBrains Mono 更適合閱讀程式碼的等寬字型，內建四種字重斜體可商用
這幾年不少大公司都把字型開放出來讓需要的使用者可以自由下載使用，例如微軟專為新的終端機程式設計的 Cascadia Code，美國政府在 USWDS（U.S. Web Design System）設計的 Public Sans，IBM 公司自行開發的 IBM Plex 字型，或是由 Red Hat 贊助以 Highway Gothic 為靈感設計的 Overpass Font 等等，這些字型都有非常高的品質，針對特定功能或需求而生，更重要的是授權方式清楚，使用時也不用擔心侵權等問題。