JavaScript – 利用 Prism 高亮 (syntax highlighting) 你的程式碼
Prism 這款高亮程式碼的套件非常簡單，我也是找很久才找到這款幾乎符合我想要的視覺跟簡便。所以推薦大家這款工具，可以自行架在自己的網站。網友寫得很好，安裝方式 可以參考他的部落格，Prism 套件可以在官網下載。
使用方式
下載後，在 <head> 中添加
|
1 2 3 4 |
<script src="prism.js"></script> <link rel="stylesheet" type="text/css" href="prism.css"> |
然後這麼寫
|
1 2 3 4 5 6 7 |
<pre><code class='language-javascript line-numbers'> $(function (){ console.log('Hello World!'); }) </code></pre> |
- 使用 <pre> 包圍
- 裡面用 <code> 包圍程式碼
- class 設定語言，如 JavaScript 就寫 language-javascript ，如 PHP 就寫 language-php
- class 可以接著拼湊你要加裝的 plugin 名稱，例如 line-numbers 就是行數的功能。plugin 可以參考官方
如果你的程式碼中包含 <> 或其他特殊符號，可使用 HTML Encoder 進行轉碼後再貼上。例如你的 伺服器是PHP，那麼要上色的 PHP 程式碼就必須這麼做喔