给大家推荐一款高大上的代码高亮插件(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/
赶紧去试试吧,小伙伴们!!
给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js的更多相关文章
- WordPress代码高亮插件SyntaxHighlighter终极使用详解
子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...
- 推荐几款实用的Android Studio 插件
推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...
- 代码高亮插件推荐——SyntaxHighlighter++
SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉ht ...
- 一款代码高亮插件 -- SyntaxHighlighter
SyntaxHighlighter 是当前用得最多的一款代码高亮插件,包括本博客也用到了该插件来显示代码,大家可以看到效果了.只不过这是针对WordPress的一款代码高亮插件,而今天我要给大家介绍的 ...
- 20140316 window live write 插件 推荐代码高亮插件 构造函数只能用初始化成员列表方式的例子
1.window live write 插件:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html 2.推荐代码高亮插件:W ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- Windows Live Writer代码高亮插件对比
一.Paste ASVisual Studio Code 参考:http://www.cnblogs.com/mikelij/archive/2010/11/13/1876199.html 插件下载: ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
随机推荐
- JS 预解释相关理解
1.JS中的内存空间分为两种:栈内存.堆内存 栈内存:提供JS代码执行的环境;存储基本数据类型的值; ->全局作用域或者私有的作用域其实都是栈内存 堆内存:存储引用数据类型的值(对象是把属性名和 ...
- 【一次面试】再谈javascript中的继承
前言 面向对象编程是每次面试必问的知识点,而前端js如何实现继承每次命中率高达80% 这不,近两天我们面试时候,同事就问道面试者此问题,但是,不论之前自己做的回答,还是面试者的回答,基本都不太令人满意 ...
- 网页端实现input数字输入框
实现input输入框只能输入数字的效果: <input type="text" name="" id="phoneNum" value ...
- MDM证书申请的流程
MDM证书申请的流程 整个流程分为两部分:vendor,customer. 一.Vendor 1.成为一个 MDM Vendor 1) 首先你需要拥有一个 Apple Enterprise accou ...
- 推荐一个iOS关于颜色的库-Wonderful
Wonderful 这个库主要是与UIColor息息相连的,其中一共包含四个子文件,UIColor+Wonderful,UIColor+Separate,SXColorGradientView,SXM ...
- android滚动公告栏
项目里要用到开奖公告,单行显示向上滚动的TextView,网上随便找了一个控件发现效果还不错改装一下就可以用到项目里.唯一不妥的地方就是字体大小不太好控制,不是正常的字体大小,也没有深究代码,先把工作 ...
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- Linux LVM学习总结——放大LV容量
本篇介绍LVM管理中的命令lvresize,我们先创建一个卷组VG VolGroup02,它建立在磁盘/dev/sdc (大小为8G)上.创建逻辑卷LV时,我们故意只使用了一小部分.具体情况如下所示 ...
- SQL Update:使用一个表的数据更新另一张表
表结构 功能 用表B的数据(mc列)更新表A的mc列 SQL Server update A SET A.mc = b.mc FROM A ,B WHERE A.bmbh = B.bmbh and A ...
- 从零自学Hadoop(05):Ambari
阅读目录 序 引入背景 Ambari介绍 在线安装 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,Sour ...