給你們推薦一款高大上的代碼高亮插件（sublime，github風格）——highlight.js

　　 常常在一些大神博客裏面看到很是好看的高亮代碼，有sublime風格，GitHub風格等等。毫無疑問，好的高亮代碼插件能夠不單單讓你的博文顯得更高大上，更重要的是溫馨的閱讀體驗。通過我在網上的一番蒐羅，終於找到了一款很是讚的高亮插件，先來看看效果吧!

1.Javascript 效果

//檢測URL function checkeUrl(url){ return new RegExp("^(https|http|ftp|rtsp|mms)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]", 'g').test(url); }; //控制檯打印 window.console = window.console || { log : function(){} };

2.Java代碼

public interface UserDao { /** * * 根據用戶對象檢索用戶信息 * @param user * @return User * @see [類、類#方法、類#成員] */ public User getUser(User user); /** * 更新用戶信息 * @param user * @return int */ public int updateUser(User user); }

更多高大上的效果，sublime,googlecode你們能夠戳這裏：http://highlightjs.org/static/test.html

使用方法：

　　準備工做：

　　　　插件使用很是簡單，只須要在你要使用插件的頁面引入highlight.js.和相應代碼風格的Css樣式文件便可。例如我這裏採用的風格爲：

　　Solarized - Dark，那麼我引入了這個css樣式文件：http://highlightjs.org/static/styles/solarized_dark.css

　　頁面顯示端，看下面的實例代碼：

//在頁面中添加初始化腳本 <script> hljs.configure({tabReplace: ' '}); hljs.initHighlightingOnLoad(); </script> //須要高亮顯示的代碼須要用<pre><code class="language"></code></pre>標籤括起來， //其中language爲要顯示代碼是什麼語言，例如要顯示Java代碼則是class="java", //html代碼則是class="xml" <pre> <code class="xml">
　　　　　　//詳細代碼 </code> </pre>

在博客園中使用：

　 在博客後臺設置中添加上JS腳本引用和初始化腳本，把要應用的代碼風格css樣式Copy到頁面定製CSS代碼中，保存。

　 而後在每次寫博文時，添加完代碼後，切換爲HTML編輯狀態，把代碼部分稍做修改，把原來的pre class去掉，而後在裏面加上code標籤以及code class便可。

 

插件官網地址：http://highlightjs.org/

趕忙去試試吧，小夥伴們！！