搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [外掛] JQuery syntax Highlight plugin，讓網頁原始碼(CSS、HTML、JS、PHP、SQL)也能顯示高亮效果

[外掛] 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.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)也能顯示高亮效果
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)也能顯示高亮效果


jquery外掛, syntax套件, 原始碼高亮, jquery,