經常在一些大神博客里面看到非常好看的高亮代碼，有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/
趕緊去試試吧，小伙伴們！！