highlight代码高亮插件

之前自己写的一个代码高亮的显示功能,现在看来是太过简洁了,正好最近看到了highlight的插件,就直接拿来用了,但是highlight的插件,生成的代码结构中,没有行数的显示,所以就对代码稍微添加了点东西,成为现在的样子,估计以后的文章中,代码展示以及示例中,都会以本文中出现的样子进行展示了,所以这里~~~

概述

关于highlight的具体信息,请查看该插件的官网:https://highlightjs.org/,具体的使用方法呢,也是在其中可以展示的,这里就不做过多的描述了,我这里对该插件做了一点小小的更改,因为想让这个插件更符合我自己的习惯而已。

更改过的插件使用

使用的方法,是和highlightjs中的方法相同的,最简单的方法就是调用hljs.highlightBlock(block);传入的block是包含代码的pre中的code元素,别人的插件,自己只是做了少量的修改,连使用方法的API都没有更改,所以感觉说什么都是多余的~~~就直接看示例吧。

本来,这个插件是可以对很多编程语言进行高亮处理的,但是我本人呢,就只是写一些JSCSSHTML的而已,所以,这里就把支持其他编程语言高亮的代码给移除了,现在就先看下这三种的显示吧:

HTML的显示

HTML的代码,如果想要显示,不管怎么说,都得要先把标签中的”<(<)"和">(>)"进行一下编码,所以,这里也是需要进行一些编码的,来看下效果吧。

	
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>test</title>
</head>
<link rel="stylesheet" href="css/css.min.css" type="text/css" />
<body>
<div class = "container">
	<div class = "mt50">
		<input type = "text" class = "inputTest" data-rel = ".inputResult" />
		<a href = "http://www.zhangyunling.com" target = "_blank">http://www.zhangyunling.com</>
	</div>
	<div>
		<h2>使用highlight的时候,代码结构需要如下写法</h2>
		<pre>
			<code class = "xml">
				这里包含的是需要显示的html代码
			</code>
		</pre>
		<pre>
			<code class = "css">
				这里包含的是需要显示的css代码
			</code>
		</pre>
		<pre>
			<code class = "javascript">
				这里包含的是需要显示的javascript代码
			</code>
		</pre>
	</div>
</div>
</body>
<script type="text/javascript" src = "jquery.js"></script>
<script type="text/javascript" src = "link.js"></script>
</html>
	

CSS的显示

	
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,
dl,dt,dd,ul,ol,li,pre,form,fieldset,
legend,button,input,textarea,th,td{
    margin:0;
    padding:0}
html{color:#000;overflow-y:scroll;overflow:-moz-scrollbars-vertical}
body,button,input,select,textarea{
    font-size:12px;font-family:arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体'
}
h1,h2,h3,h4,h5,h6{font-size:100%}
em{font-style:normal}
small{font-size:12px}
ul,ol{list-style:none}
a{text-decoration:none}
a:hover{text-decoration:underline}
legend{color:#000}
fieldset,img{border:0}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
textarea{resize:vertical}
.left{float:left}
.right{float:right}
.overflow{overflow:hidden}
.hide{display:none}
.block{display:block}
.inline{display:inline}
.error{color:#F00;font-size:12px}
	

这是在百度首页中拷贝来的一段代码。

javascript代码的显示

	
$(document).ready(function() {
	$('pre code').each(function(i, block) {
		//该段代码,就是使用jQuery时,初始化该highlight的方法。
		hljs.highlightBlock(block);
	});
});
	

结束

这个就算是结束了吧,没有什么好总结的,毕竟是拿来直接使用的,有一点是,该方法不支持低版本的IE浏览器,在低版本的IE中,只会以代码格式的形式处理,所以请注意...

不过,现在有个问题,就是当代码换行时,行号的标识就会出现差错,之后再进行更新。

压缩版下载地址:http://www.zhangyunling.com/download/20141213/highlight-min.rar
未压缩版地址:http://www.zhangyunling.com/download/20141213/highlight-dev.rar

本文地址:http://www.zhangyunling.com/?p=267

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>