highlight.js css,highlight代码高亮插件

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

概述

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

更改过的插件使用

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

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

HTML的显示

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

test

http://www.zhangyunling.com>

使用highlight的时候，代码结构需要如下写法

这里包含的是需要显示的html代码

这里包含的是需要显示的css代码

这里包含的是需要显示的javascript代码

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中，只会以代码格式的形式处理，所以请注意...

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