給大家推薦一款高大上的代碼高亮插件（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/

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