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

   常常在一些大神博客里面看到很是好看的高亮代码,有sublime风格,GitHub风格等等。毫无疑问,好的高亮代码插件能够不单单让你的博文显得更高大上,更重要的是温馨的阅读体验。通过我在网上的一番搜罗,终于找到了一款很是赞的高亮插件,先来看看效果吧!javascript

1.Javascript 效果css


//检测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代码html


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.htmljava

使用方法:google

  准备工做:url

    插件使用很是简单,只须要在你要使用插件的页面引入highlight.js.和相应代码风格的Css样式文件便可。例如我这里采用的风格为:spa

  Solarized - Dark,那么我引入了这个css样式文件:http://highlightjs.org/static/styles/solarized_dark.css插件

  页面显示端,看下面的实例代码:code

//在页面中添加初始化脚本 <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>

在博客园中使用:xml

  在博客后台设置中添加上JS脚本引用和初始化脚本,把要应用的代码风格css样式Copy到页面定制CSS代码中,保存。

  而后在每次写博文时,添加完代码后,切换为HTML编辑状态,把代码部分稍做修改,把原来的pre class去掉,而后在里面加上code标签以及code class便可。

 

插件官网地址:http://highlightjs.org/

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

相关文章
相关标签/搜索