首页 > Web开发 > 详细

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

时间:2014-04-16 13:40:13      阅读:578      评论:0      收藏:0      [点我收藏+]

经常在一些大神博客里面看到非常好看的高亮代码,有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/

赶紧去试试吧,小伙伴们!!


本文出自 “Ziv小威” 博客,请务必保留此出处http://zivxiaowei.blog.51cto.com/8815385/1395833

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

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

原文:http://zivxiaowei.blog.51cto.com/8815385/1395833

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!