Z-blog syntaxhighlighter Long Code cannot wrap solution (based on jquery) _jquery

Use Syntaxhighlighter syntax to highlight the plug-in friends may have encountered code to show the problem, this problem on the Internet can not find any solution, has been bothering me for a long time, today is to solve it, the method is actually simple, the following next ...

Workaround:

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.

Because everyone calls the CSS different, everyone can modify the CSS according to their needs

Test found for the 3.08 version is not valid, you can refer to the following method

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_system\admin\ueditor\third-party\syntaxhighlighter

Add CSS to file shCoreDefault.pack.css:

Body. Syntaxhighlighter. line{  
white-space:pre-wrap!important; 
syntaxhighlighter{
width:100%!important;margin:.3em 0 3em 0!important;position:relative!important;overflow: Auto!important;background-color: #f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;
｝

2, jquery code:

$ (function () {//Line wrap back var shlinewrap = function () {$ ('. Syntaxhighlighter '). each (function () {//Fet
   ch var $sh = $ (this), $gutter = $sh. Find (' Td.gutter '), $code = $sh. Find (' Td.code '); Cycle through lines $gutter. Children ('. Line '). per (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 (), $cod
   Eline);
  });
 });
 }; Line wrap then syntax highlighter has done it ' s stuff var shlinewrapwhenready = function () {if ($ ('. Syntaxhig Hlighter '). 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.