一般的文章如果放上程式碼,程式碼通常沒有顏色,也沒有編排,我想要把這裡打造成一個知識點,每次要查詢資料時,就從自己的網站先找起,所以就要放程式碼。
而這程式碼如果編排、顏色不好看,那真的是看的很痛苦。之前有在痞客邦有部落格,就貼過程式碼,慘不忍睹。
所以為了讓自己的網站,程式碼能好看一點,就搜尋了一下有沒有讓程式碼看起來好看一點的工具,就找到了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>
結果有出來就好囉!!