經常在一些大神博客里面看到非常好看的高亮代碼，有sublime風格，GitHub風格等等。毫無疑問，好的高亮代碼插件可以不僅僅讓你的博文顯得更高大上，更重要的是舒適的閱讀體驗。經過我在網上的一番搜羅，終于找到了一款非常贊的高亮插件，先來看看效果吧!

1.Javascript 效果

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

2.Java代碼

publicinterfaceUserDao {/** ? ? * ? ? ?* 根據用戶對象檢索用戶信息 ? ? * @param user ? ? * @return User ? ? * @see [類、類#方法、類#成員] ? ? */public User getUser(User user); ? ? ? ?/** ? ? * 更新用戶信息 ? ? * @param user ? ? * @return int ? ? */publicintupdateUser(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><codeclass="language"></code></pre>標簽括起來，//其中language為要顯示代碼是什么語言，例如要顯示Java代碼則是class="java",//html代碼則是class="xml"<pre><codeclass="xml">　　　　　　//詳細代碼 ? ?</code></pre>

在博客園中使用：

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

　 然后在每次寫博文時，添加完代碼后，切換為HTML編輯狀態，把代碼部分稍作修改，把原來的pre class去掉，然后在里面加上code標簽以及code class即可。

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

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

轉載于:https://blog.51cto.com/zivxiaowei/1395833

總結

以上是生活随笔為你收集整理的给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。