给大家推荐一款高大上的代码高亮插件（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/

赶紧去试试吧，小伙伴们！！