Z-Blog-SyntaxHighlighter-Langcode kann nicht umschlossen werden (basierend auf jquery)_jquery

Freunde, die das SyntaxHighlighter-Syntaxhervorhebungs-Plugin verwenden, sind möglicherweise auf das Problem der Codeanzeige ohne Zeilenumbrüche gestoßen. Es hat mich schon lange gestört Die Lösung ist eigentlich einfach, lasst uns darüber reden...

Lösung:

Öffnen Sie die Datei shCoreDefault.css, suchen Sie die Definition des Textbereichs .syntaxhighlighter und fügen Sie am Ende den Satz hinzu: word-break:break-all !important; und es ist in Ordnung, was bedeutet, dass der Code zum Umbruch gezwungen wird Anzeige.

Da jeder ein anderes CSS aufruft, können Sie das CSS entsprechend Ihren eigenen Bedürfnissen ändern

Der Test ergab, dass es für Version 3.08 ungültig ist. Sie können sich auf die folgende Methode beziehen

Da es in meinem Blog hauptsächlich um Code-Sharing geht, sind viele der geposteten Codes sehr lang. Oft muss ich es manuell einpacken.

Aber ich kann es heute einfach nicht ertragen. Finden Sie online eine Lösung.

1. CSS-Änderung:

Im Ordner: zb_systemADMINueditorthird-partySyntaxHighlighter

CSS in der Datei shCoreDefault.pack.css hinzufügen:

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

Der obige Code ist ein Langcode. Mal sehen, ob jeder seinen Beruf gewechselt hat? ?

Jetzt stimmt die Höhe der Zeilennummer mit der Höhe des Codes überein.