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. 內建多種樣式,可在不同的網頁背景下呈現最佳效果