jQuery 教學

TE
發表於 2019-03-14 20:57:32

一般的文章如果放上程式碼,程式碼通常沒有顏色,也沒有編排,我想要把這裡打造成一個知識點,每次要查詢資料時,就從自己的網站先找起,所以就要放程式碼。

而這程式碼如果編排、顏色不好看,那真的是看的很痛苦。之前有在痞客邦有部落格,就貼過程式碼,慘不忍睹。

所以為了讓自己的網站,程式碼能好看一點,就搜尋了一下有沒有讓程式碼看起來好看一點的工具,就找到了Highlight.js

 

官方網站:

https://github.com/highlightjs/highlight.js

 

直接切入主題

使用方法:

引用這二個

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
 

而真正要起作用是

$(function(){
    hljs.initHighlightingOnLoad();
});
    

放程式碼的地方,官方給的範例是這樣

<pre><code class="html">...</code></pre>

 

但我不知道...是要放什麼?

是這樣

<pre><code class="javascript">
function sub(){
    $(":checkbox").each(
        function() {
           $(this).attr('checked', false);
        }
    );
}
</code></pre>

 

還是

<pre><code class="javascript">
<div>function sub(){</div>
    <div>$(":checkbox").each(</div>
       <div> function() {</div>
           <div>$(this).attr('checked', false);</div>
        <div>}</div>
    <div>);</div>
<div>}</div>
</code></pre>

 

後來驗證過後是這樣

<pre><code class="javascript">
function sub(){
    $(":checkbox").each(
        function() {
           $(this).attr('checked', false);
        }
    );
}
</code></pre>

 

最後呈現的效果還不錯,以後看程式碼就舒服多了
 


 

 

整個試出來的過程花了1小時

一開始我不是用CDN的方式

是GitHub下載下來,放在自己的本地端,然後引入這二個檔案,就一直不出來,檔案路徑都是正確的,都可以讀到資料,但是就是沒有效果,覺的很納悶

<link rel="stylesheet" href="<?php echo HTTP_PROJECT."/pub/js/highlight/src/styles/monokai-sublime.css"; ?>" >
<script src="<?php echo HTTP_PROJECT."/pub/js/highlight/src/highlight.js"; ?>"></script>

後來用了這樣就可以

<link rel="stylesheet" href="<?php echo HTTP_PROJECT."/pub/js/highlight/src/styles/monokai-sublime.css"; ?>" >
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

只是換了CDN的9.15.6 min這一版,效果就出來了

 

不曉得是什麼原因,後來我就都用CDN了

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

 

結果有出來就好囉!!

回覆