[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

梅干 2019/11/18 1 分鐘閱讀

　　一直以來最讓梅干感到頭大的就是，分享關於網頁設計相關的技巧，由於需要在網頁中顯示，網頁的原始碼，但先前在WordPress使用幾套的原始碼高亮外掛，效果都不盡理想，因此最後梅干則是利用轉原始碼工具，將原始碼變成一般的HTML+CSS，直接嵌入文章中，減少一些不必要的狀況發生。

雖然利用原始碼轉碼工具，相當的方便，但最近不知如何，網站時常出狀況，因此梅干就上網爬了許多關於，原始碼的高亮效果外掛，發現到這一套不但設定簡單，且支援前後端的網頁語言，包含HTML、CSS、Javascript、PHP、SQL，因此有需要的朋友，現在也一塊來看看囉！

JQuery syntax Highlight plugin

外掛名稱：JQuery syntax Highlight plugin
外掛下載：http://webcodingstudio.com/blog/jquery-syntax-highlight-plugin

Step1
首先，進到JQuery syntax Highlight plugin外掛頁面，將畫面向下拖曳，就會看到DOWNLOAD的下載清單，而目前最新版為1.0.6，當然是下載最新的囉！
梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

Step2
下載完畢，解壓後分別會看到以下的檔案，但只需jquery.highlight.css、jquery.highlight.js這二隻檔案。
梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

Step3
首先，先將CSS檔載入，並加在<head>~</head>之間。

Step4
接著再把js檔載入，並加在</body>前，或是也可加在</head>前，加在</head>的顯示速度會比較快一些。

<script src="jquery.min.js"></script>
<script src="jquery.highlight.js"></script>

Step5
最後再加入以下碼，啟用外掛。

$(document).ready(function(){
    $('pre.code').highlight({
      source:1, 
      zebra:1, 
      indent:'space', 
      list:'ol',
      attribute: 'data-language'
    });
});

Step6
當要載入CSS時，只需加入<pre class="code" data-language="css">…</pre>
梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

Step7
當要載入HTML時，只需加入<pre class="code" data-language="html">…</pre>
梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

Step8
當要載入javascript時，只需加入<pre class="code" data-language="js">…</pre>
梅問題-[外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果