解决SyntaxHighlighter 长代码无法换行的问题

作者：袖梨 2022-06-25

下面说下如何解决。

打开shCoreDefault.css文件，找到对.syntaxhighlighter textarea的定义，在最后加上一句：word-break:break-all !important;就ok了，意思是让代码强制换行显示。

具体步骤

由于我的博客主要是代码分享，很多贴的代码，都很长。很多时候我都是手动给他换行。

但是今天实在是受不了。从网上找个办法解决一下。

1、css修改：

在文件夹：zb_systemADMINueditorthird-partySyntaxHighlighter

在文件shCoreDefault.pack.css添加css：

代码如下

复制代码

body .syntaxhighlighter .line{

white-space
: pre-wrap
!important
;}
pre
,
code

{
display
:
block
;
overflow
:
auto
;
background
:
#f4f4f4
;
padding
:
5px

10px
;
border
:
1px

solid

#eee
;
word-wrap:break-word;
/* Internet Explorer 5.5+ */

white-space
: pre-wrap;
/* Firefox */
}
2、Jquery代码：

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