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

為了讓閱讀程式碼更方便，編輯器通常都會內建高亮（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 的線上工具，如果未來要編輯或修改程式碼內容時就必須重新產生。