解决syntaxhighlighter3.0.83版滚动条不换行和行号错位的bug
在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
转载随意,但请附上文章地址:-)
评论已关闭