在CSDN博客的代码高亮中代码是换行的且不会出现滚动条，也没有行号出错的bug。然而，使用syntaxhighlighter3.0.83版bug还真多，如果一行代码过长默认的css会出现滚动条，很难看，如果使用强制换行的css之后会出现行号对不上的bug。

还好，这一切都有解决办法，无非是修改css和js部分。

css部分请保证以下2个地方有这些属性：

.syntaxhighlighter .line {
	white-space: pre!important
}
.syntaxhighlighter {
	word-break:break-all
}

js部分，需要在SyntaxHighlighter.all();执行之后添加修复代码：

// 行号换行修复
var shLineWrap = function () {
	$('.syntaxhighlighter').each(function () {
		// Fetch
		var $sh = $(this),
			$gutter = $sh.find('td.gutter'),
			$code = $sh.find('td.code')
			;
		// Cycle through lines
		$gutter.children('.line').each(function (i) {
			// Fetch
			var $gutterLine = $(this),
				$codeLine = $code.find('.line:nth-child(' + (i + 1) + ')')
				;
			//alert($gutterLine);
			// Fetch height
			var height = $codeLine.height() || 0;
			if (!height) {
				height = 'auto';
			}
			else {
				height = height += 'px';
				//alert(height);
			}
			// Copy height over
			$gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
		});
	});
};

// Line wrap back when syntax highlighter has done it's stuff
var shLineWrapWhenReady = function () {
	if ($('.syntaxhighlighter').length === 0) {
		setTimeout(shLineWrapWhenReady, 10);
	}
	else {
		shLineWrap();
	}
};

// Fire
shLineWrapWhenReady();

运行效果和本文的代码效果一致，在换行之后的新一行并不会出现行号。

本文地址：http://blog.zhengshuiguang.com/software/syntaxhighlighter-line.html

转载随意，但请附上文章地址:-)