解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题

Bigmerboy

　　最近博客项目已基本完工了，在优化前端的时候，突然想起发表的很多文章都包含代码这部分，于是想起了用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样式的了，如文章本身的代码样式所示。

游客，如果您要查看本帖隐藏内容请回复

wangfanluck

回个帖子，下班咯~

怀抱兔叽

支持楼主，用户楼主，楼主英明呀！！！

惠州忠仔

楼下的接上。。。。

我叫舞姐

我也是坐沙发的

GQXZWLSX道

支持，楼下的跟上哈~

zzwlkjx1

看起来好像不错的样子

fly128jt

顶起顶起顶起

funlimit是南桥

我是个凑数的。。。

lililinq

好，很好，非常好！