Solve the problem that syntaxhighlighter long code cannot wrap

Source: Internet
Author: User

Next how to solve.

Open the Shcoredefault.css file, find the definition of the. Syntaxhighlighter textarea, and at the end, add a sentence: Word-break:break-all!important; OK, It means to have the code force line wrapping to appear.

Specific steps

Because my blog is mainly code sharing, a lot of code, are very long. Most of the time I have to hand him the line.

But today I can't stand it. Find a way to solve the problem online.

1, CSS Modification:

In folder: Zb_systemadminueditorthird-partysyntaxhighlighter

Add CSS to file shCoreDefault.pack.css:

The code is as follows Copy Code

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 code:

$(
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 then syntax highlighter has done it ' s stuff

Var

Shlinewrapwhenready =
function

() {

If

($ ('. Syntaxhighlighter '). Length = = 0) {

SetTimeout (Shlinewrapwhenready, 10);

}

Else

{

Shlinewrap ();

}

};

Fire

Shlinewrapwhenready ();});

The above code belongs to the long code. Let's see if we've all changed the line??

Now, the height of the line number can be consistent with the height of the code.

Part from: http://www.suchso.com/projecteactual/z-blog-jquery-SyntaxHighlighter-longcode.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.