一个完美的站长网站里面没有代码高亮的插件怎么能行！小编在用SyntaxHighlighter插件的时候就遇到了一个非常脑热的问题，所以分享一下解决方法！

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

问题描述

SyntaxHighlighter是根据代码中的换行符分配行号的。但是如果一行代码或注释太长的话在页面中显示时需要分成多行显示，这时行号就对不上了！就像下图的情况

左侧的行号和右侧的内容是不对齐的

解决方法

其实通过修改引用的CSS样式使其强制不换行，但这种方法的话下方会出现横向滚动条，太不美观了，权衡利弊，果断抛弃。

我的原理是把行用each遍历一下，计算出右侧的行高，然后把得到的值赋给左侧的行号列。

代码如下：

<script>

$(window).load(function(){

$('.code .line').each(function(index) {

var yqhg = $(this).height();

$('.gutter .line:eq('+index+')').attr('style','height:'+yqhg+'px !important')

});

});

</script>

插入到页面底部（SyntaxHighlighter.all()方法后面也行），本方法是基于JQuery写的，大家用这种方法之前请务必引入JQuery文件！

如果本文对你有用的话请不要忘记分享关注哦！谢谢观看！