解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题
最近博客项目已基本完工了，在优化前端的时候，突然想起发表的很多文章都包含代码这部分，于是想起了用SyntaxHighlighter来对文章中贴的代码进行美化，但用过SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题，这个问题在网上也找不到什么解决办法，折腾了一天，总算是把它解决了，办法其实简单，下面说下如何解决。
打开shCore.css和shCoreDefault.css文件，找到对.syntaxhighlighter textarea的定义，在最后加上一句：word-break:break-all !important;意思是让代码强制换行显示。
white-space: pre-wrap !important;
word-break: break-all !important;
刷新页面看看，恩，好像是有点效果，可以换行了，但是，首行错位了：
好，看来问题快解决了，赶紧用浏览器inspect一下，发现首行位置有个container的before伪类把它撑开了：
那这就好办了，赶紧在shCore.css里面写了一个类样式：
.syntaxhighlighter .code .container:before { /*一定要写这样写全，因为bootstrap用到了container*/
content: "" !important;
}
再刷新下页面，首行偏移的问题解决了，新的问题又来了，行号竟然没对齐：
然后就又寻思了一番，最后用js解决了问题，用js慢慢调，解决了，打开shCore.js，在最后添加以下代码：
;$(function () {
var shLineWrap = function () {
$('.syntaxhighlighter').each(function () {
var $sh = $(this)，
$gutter = $sh.find('td.gutter')，
$code = $sh.find('td.code');
$gutter.children('.line').each(function (i) {
var $gutterLine = $(this)，$codeLine = $code.find('.line:nth-child(' + (i + 1) + ')');
var height = $codeLine.height() || 0;
if (!height) {
height = 'auto';
}
else {
height = height += 'px';
}
$gutterLine.attr('style'， 'height:' + height + '!important');
console.debug($gutterLine.height()， height， $gutterLine.text()， $codeLine);
});
});
};
var shLineWrapWhenReady = function () {
if ($('.syntaxhighlighter').length === 0) {
setTimeout(shLineWrapWhenReady， 10);
}
else {
shLineWrap();
}
};
shLineWrapWhenReady();
});
再刷新下浏览器，恩，现在终于全对了：
css完整代码如下：
.syntaxhighlighter a， .syntaxhighlighter div， .syntaxhighlighter code， .syntaxhighlighter， .syntaxhighlighter td， .syntaxhighlighter tr， .syntaxhighlighter tbody， .syntaxhighlighter thead， .syntaxhighlighter caption， .syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: Monaco，Menlo，Consolas，"Courier New"，monospace;
font-weight: normal !important;
font-style: normal !important;
min-height: auto !important;
font-size: 13px !important;
white-space: pre-wrap !important;
word-break: break-all !important;
}
.syntaxhighlighter .code .container:before {
content: "" !important;
}
好了，到这里可能有些小伙伴们觉得不想自己动手，那我这里也提供了最终修改版的源文件，方便直接使用，css文件已修改成bootstrap样式的了，如文章本身的代码样式所示。
**** Hidden Message *****
回个帖子，下班咯~ 支持楼主，用户楼主，楼主英明呀！！！ 楼下的接上。。。。 我也是坐沙发的 支持，楼下的跟上哈~ 看起来好像不错的样子 顶起顶起顶起 我是个凑数的。。。 好，很好，非常好！