z-blog SyntaxHighlighter long code cannot be wrapped (based on jquery)

z-blog SyntaxHighlighter long code cannot be wrapped (based on jquery)_jquery

WBOY

Release： 2016-05-16 15:31:20

Original

1243 people have browsed it

Friends who use the SyntaxHighlighter syntax highlighting plug-in may have encountered the problem of code display without line breaks. There is no solution to this problem on the Internet. It has been bothering me for a long time. Today I have solved it. The solution is actually Simple, let’s talk about it...

Solution:

Open the shCoreDefault.css file, find the definition of .syntaxhighlighter textarea, and add the sentence at the end: word-break:break-all !important; and it’s ok, which means that the code is forced to wrap and display.

Since everyone calls different css, you can modify the css according to your own needs

The test found that it is invalid for version 3.08. You can refer to the following method

Since my blog is mainly about code sharing, many of the codes posted are very long. Many times I have to manually wrap it.

But I just can’t stand it today. Find a solution online.

1. css modification:

In the folder: zb_systemADMINueditorthird-partySyntaxHighlighter

Add css in the 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;
｝

Copy after login

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 back when syntax highlighter has done it's stuff
 var shLineWrapWhenReady = function () {
  if ($('.syntaxhighlighter').length === 0) {
   setTimeout(shLineWrapWhenReady, 10);
  }
  else {
   shLineWrap();
  }
 };
 // Fire
 shLineWrapWhenReady();});

Copy after login

The above code is a long code. Let's see if everyone has changed careers? ?

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