您的位置:首页 > Web前端 > JavaScript

给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js

2014-04-15 11:39 746 查看
经常在一些大神博客里面看到非常好看的高亮代码,有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(){}
};

[/code]

2.Java代码

public interface UserDao {

/**
*
* 根据用户对象检索用户信息
* @param user
* @return User
* @see [类、类#方法、类#成员]
*/
public User getUser(User user);

/**
* 更新用户信息
* @param user
* @return int
*/
public int updateUser(User user);
}

[/code]

更多高大上的效果,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>
[/code]

在博客园中使用:
  在博客后台设置中添加上JS脚本引用和初始化脚本,把要应用的代码风格css样式Copy到页面定制CSS代码中,保存。
  然后在每次写博文时,添加完代码后,切换为HTML编辑状态,把代码部分稍作修改,把原来的pre class去掉,然后在里面加上code标签以及code class即可。
 
插件官网地址:http://highlightjs.org/
赶紧去试试吧,小伙伴们!!

作者:Ziv小威

出处:http://www.cnblogs.com/zivxiaowei/

关于作者:专注于Java技术的程序员一枚,此外对JS开发保持着较高的兴趣。爱好音乐,阅读,FM等等。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

如有问题,可以邮件:wewoor@foxmail.com

微博:Ziv小威
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: