魔酷阁模板平台,坚持走低价精品路线!
分享/出售模板
当前位置:主页 > 建站教程 > 建站技术 >

JQuery搞定SyntaxHighlighter v3.x长代码自动换行 行号错乱问题

发布时间:2017-03-30 来源:未知 浏览: 关键词:jquery 

长代码换行是SyntaxHighlighter3.0版本之前的功能,但3.0之后就木了,草草草草艹!本人认为主要猿因是gutter(代码行号指示器)的换行难做。因为3.x版是将代码行号和代码部分分开生成HTML的,猿来的老版本是在一起的。这样做是便于直接复制代码,而不会复制到行号上去。

很多人都在想办法让它实现换行,但都卡在代码行号的问题上。我关注这个问题已经差不多一年了,今天终于有了个比较漂亮的解决办法。

首先,强制给代码部分换行的CSS还是要写的:

.syntaxhighlighter textarea { 后加入

white-space: pre-wrap !important;
word-break: break-all;
/* 如果是需要保留一行内的单词完整性则需要把 break-all 改为 break-word  */

这段CSS换行的前提是,pre标签的外边一定要有一个固定宽度的容器对象。比如一个600px宽度的div就可以。

然后,我们需要一段JQuery,用来计算被换行的代码显示在页面上的高度,然后赋值给它的行标。这段代码是国外一个论坛上找的,但我测试的时候发现它有点小问题,我的环境是JQuery1.7+Firefox15,我顺便做了一个修正,全部代码如下:

$(function() {
// Line wrap back
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
console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
});
});
};


// 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();
});

现在,行号的高度就能和代码的高度保持一致了。

如果在CHROME和火狐浏览器下出现首行错位问题,解决办法如下: 根本原因是与主CSS样式的.container样式冲突,如下位置是bootstrap的定义:

.clearfix::before, ...,.container::before, .container::after, ..., .modal-footer::before, .modal-footer::after {
    content: " ";
    display: table;
}

 就是这个display: table;属性导致的,重写一个 syntaxhighlighter的container样式覆盖它就行了:

 .syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {display: none;}
魔酷阁-专业织梦模板下载平台,转载请注明出处:http://www.mokuge.com/webdesign/1335.html
责任编辑:mokuge
共有人阅读,期待你的评论!评论
  • POWERED BY DEDECMS COPYRIGHT©2013-2017 魔酷阁 苏ICP备13059281号