js 網頁開發

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

2019/11/18

梅問題-[外掛] JQuery syntax Highlight plugin,讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果
  一直以來最讓梅干感到頭大的就是,分享關於網頁設計相關的技巧,由於需要在網頁中顯示,網頁的原始碼,但先前在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)也能顯示高亮效果
Step2
下載完畢,解壓後分別會看到以下的檔案,但只需jquery.highlight.cssjquery.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)也能顯示高亮效果
Step9
當要載入PHP時,只需加入<pre class="code" data-language="php">…</pre>
梅問題-[外掛] JQuery syntax Highlight plugin,讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果
Step10
當要載入SQL時,只需加入<pre class="code" data-language="sql">…</pre>
梅問題-[外掛] JQuery syntax Highlight plugin,讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果