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

最後更新於 2020 年 07 月 07 日

Copyright : Yurii Tymchuk / 123RF Stock Photos

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

本文要介紹的「ToHTML」是一個線上將語法上色的產生器,我在十幾年前曾介紹過,經過這麼久的時間依然持續在線上運作,如果你想在網頁顯示程式碼(例如在寫文章教學時會帶入一段代碼範例),可以透過 ToHTML 將它轉換為具有色彩效果的 HTML 原始碼,就能直接在頁面上呈現更易於閱讀的效果,而且無需額外使用任何擴充功能。

ToHTML 支援相當多種程式語言類型,例如很常見的 PHP、CSS、Java、HTML、C++、Perl、Python 或 Ruby 等等,都能對程式碼加入正確顏色,本身亦提供不同的配色樣式,操作方式也很簡單,將程式碼貼上、選擇樣式後就能轉為可在一般網頁顯示的 HTML 語法,使用者也會從 ToHTML 網站預覽產生後的程式碼樣式。

ToHTML
https://tohtml.com/

使用教學

STEP 1

開啟 ToHTML 可以看到一邊是原始碼輸入框,右側有選擇樣式和程式語言的選項。

STEP 2

把要加入高亮效果的程式碼複製、貼上,下方會計算程式碼字元數,由右上角選擇要加入的樣式,有些適合淺色背景,有些必須在深色背景看比較正常,不過可先從 ToHTML 預覽效果。

接著在 Type 選擇程式語言類型,例如 PHP 或 CSS ,大部分的類型都能在這裡找到,選擇適合的程式語言將有助於標記出正確的顏色,完成後按下左下角「Highlight」就會轉換。

STEP 3

ToHTML 和 hilite.me 原理一樣,都是將程式碼以 HTML 上色,看起來就會很像是編輯器內建的高亮效果,當然在閱讀上也會更易懂,hilite.me 不同的是還有標記行數的功能,相較於 ToHTML 產生的樣式來說好像也更專業。

如果不喜歡彩色效果,ToHTML 樣式的「grayscale」灰階效果則是直接帶入單色模式。

稍微測試了一下自己比較常接觸到的 PHP 或 CSS 語法都能正常加入高亮顯示,只要將產生的 HTML 程式碼複製、貼到網頁上就能完整複製產生的高亮效果,也不需要額外安裝其他的擴充功能或是使用第三方服務,非常簡單。

當然這也不是完全沒有缺點,ToHTML 只是一個將程式碼轉換為 HTML code 的線上工具,如果未來要編輯或修改程式碼內容時就必須重新產生。

值得一試的三個理由:

  1. 線上將程式碼轉為帶有高亮效果的 HTML 代碼,可以直接使用於網頁
  2. 支援 PHP、CSS、Java、HTML、C++、Perl、Python、Ruby 等程式語言
  3. 內建多種樣式,可在不同的網頁背景下呈現最佳效果

 

相關的文章

tiiny.host 超簡單免費靜態網站空間,打包上傳 HTML 網頁檔輕鬆架站

現在時下主流的虛擬主機型態多以支援 PHP 加上 MySQL 資料庫為主,也因為很多架站程式都必須使用這兩項技術,像是知名的 WordPress,如果你要單純建立個人網站,大家會推薦你直接使用 WordPress 更易於更新或管理內容。若沒有技術基礎但又很想要弄個網站,還有像是 Weebly、Wix.com 和 Squarespace 所見即所得建站服務,可以利用拖曳方式快速將內容組合起來,變成一個看起來專業的網頁。

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

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

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站,因此我就比較少介紹同類型的服務,不過網路上確實有不少類似網站,例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源;或是 The Stocks 精選免費圖庫,一站收錄更方便搜尋等等,這些集合式免費資源都非常值得加入書籤以備不時之需。

回應