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

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

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

  1. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  2. 推荐几款实用的Android Studio 插件

    推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...

  3. 代码高亮插件推荐——SyntaxHighlighter++

    SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...

  4. 一款代码高亮插件 -- SyntaxHighlighter

    SyntaxHighlighter 是当前用得最多的一款代码高亮插件,包括本博客也用到了该插件来显示代码,大家可以看到效果了.只不过这是针对WordPress的一款代码高亮插件,而今天我要给大家介绍的 ...

  5. 20140316 window live write 插件 推荐代码高亮插件 构造函数只能用初始化成员列表方式的例子

    1.window live write 插件:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html 2.推荐代码高亮插件:W ...

  6. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  7. [转]7个高性能JavaScript代码高亮插件

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...

  8. Windows Live Writer代码高亮插件对比

    一.Paste ASVisual Studio Code 参考:http://www.cnblogs.com/mikelij/archive/2010/11/13/1876199.html 插件下载: ...

  9. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

随机推荐

  1. Easticsearch通信方式_API

    目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 1.Elasticsearch概念 a. Elasticsearch是一个基于Luc ...

  2. JavaScript中this指向的简单理解

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  3. 理解CSV文件以及ABAP中的相关操作

    在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...

  4. CRM基于.NET的增删改查

    一.准备工作: 1.添加 microsoft.crm.sdk.proxy.dll和microsoft.xrm.sdk.dll 引用到项目中!并引用以下using! using Microsoft.Xr ...

  5. Atitit。数据库 安全性 重要敏感数据加密存储解决方案

    Atitit.数据库 安全性 重要敏感数据加密存储解决方案 1.1. 加密存储的重要性1 1.2. 使用的加密算法aes1 1.3. 数据加密以后会有一些问题.1 1.3.1. 一个是统计,比如统计资 ...

  6. Oracle a Parameter with multi value

     备注:此两种方案,都因为oracle内部字符函数的参数长度4000限制.另外,个人测试,性能不如”将数据插入物理表再JOIN查询“或”每1000次ID做一次IN查询“的总的运行速度. 即ID的个数越 ...

  7. Thread多线程(一)

    网上关于多线程的讲解有很多,意义也不用过多介绍,相信聪明的你早已知道,下面我们在剖析一下JAVA中的多线程的一些方法. 在JAVA中分别提供了两种方式实现多线程,分别继承Java.lang.Threa ...

  8. Linux 格式化扩展分区(Extended)

    如果你在Linux系统中格式化磁盘时遇到如下错误,那么表示你正在格式化一个扩展分区. [root@GETTestLNX06 ~]# mkfs.ext4 /dev/sdb1   mke2fs 1.41. ...

  9. CentOS7 虚拟机搭建、初始设置、简单使用

    注:虚拟机安装的系统是CentOS7 1.网络设置 网络的设置主要是为了让虚拟机和物理机能够相互ping通,这样就可以用XShell之类的工具操控,也可以上网 见另一篇 CentOS7网络配置 2.物 ...

  10. c#获取时间

    DateTime.Now.AddDays(10).ToShortDateString().ToString() addDays(整数) 一天前DateTime.Now.AddDays(-1).ToSh ...