Prism.js 網頁程式碼高亮顯示工具

Prism.js 介紹

在寫網頁時如果要貼上程式碼該怎麼做才能保持換行和程式碼顏色？大多數的部落格都有相關的撰寫程式碼區塊的功能，或是可以使用第三方套件。如果很不幸的沒有，又或是自訂的 HTML 頁面，那或許可以考慮 Prism.js 這款工具。

Prism.js 是一款輕量級、可擴充的語法高亮工具，本體只有 2KB，每增加一個語言只要增加 300-500 bytes 大小，且安裝簡單，只要一個 css 和 js 檔案即可。支援非常多種語言，即使不支援，也可以自行開發。也有許多套件，常用的包括突出指定行、顯示行號、顯示語言、自訂命令視窗顯示樣式、複製到剪貼簿按鈕、檔案預覽視窗等等。

Prism.js 安裝教學

開啟 Prism.js 的官方網站，先點選右側的 theme 區塊，選擇自己想要的主題，可以在下方的 Examples 看到當前選中主題的樣式

選擇好主題後點選右上角的 Download 按鈕

首先在 Compression level 選擇 Minified version (縮小版)，他會去掉部分註解、空白之類的內容，縮小檔案。
Themes 就選擇剛剛自己決定的主題。
Languages 就是支援哪些語言的語法高亮，最好不要全部選擇，應該要選擇自己常用的語言，避免每次使用者載入網頁時需要下載過多且無用的部分，增加網站載入時間。
至於 Plugins 的部分，可以每個都點進去查看看自己有沒有需要，下面推薦筆者安裝的套件項目：

Line Highlight: 指定行高亮
Line Numbers: 顯示行號
Show Language: 顯示語言(筆者常用來自訂為檔案名稱)
Toolbar: 工具欄套件(複製到剪貼簿按鈕和顯示語言都需要此套件)
Command Line: 命令視窗(可以模擬命令視窗的輸出格式)
Copy to Clipboard Button: 複製到剪貼簿按鈕
Treeview: 比較易懂的檔案目錄層級顯示

詳細內容和使用範例可以查看：Prism.js 推薦套件和使用方式

都選擇完畢之後就點選 Download js 和 Download css 下載檔案

將下載後的檔案放入網站中，然後在要顯示程式碼的頁面(html 檔案)中加入下列程式碼：註：本示範是將 prism.css 和 prism.js 放在同一層目錄中

    
	
<!DOCTYPE html>
<html lang="en">
<head>
    <link href='prism.css' rel='stylesheet' type='text/css'/>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<script src='prism.js ' type='text/javascript'></script>
</body>
</html>

使用 Prism.js 高亮程式碼

加入 js 和 css 檔案後，只要將要高亮的程式碼放在程式碼區塊，並指定程式語言。
指定語言只要在 code 區塊裡面 class 屬性的 "language-" 後面放置語言名稱即可(需要安裝語言，且需要使用指定的語言名稱，詳情請見官網上的 Supported languages)

程式碼區塊的程式碼如下(示範以指定 html 語言為例)：

    
	
<pre>
    <code class="language-html">
    </code>
</pre>

注意事項

如果在程式碼區塊中有出現小於符號「<」，則因為 html 語言的關係，需要全部替換為「<」，才能正常顯示。例如「<br/>」則應替換為「 <br/>」，完整示範如下：

    
	
<pre>
    <code class="language-html">
    	 &lt;br/>
    </code>
</pre>

Ruyut 鹿遊

搜尋此網誌