Heim > Web-Frontend > js-Tutorial > Z-Blog-SyntaxHighlighter-Langcode kann nicht umschlossen werden (basierend auf jquery)_jquery

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

WBOY
Freigeben: 2016-05-16 15:31:20
Original
1241 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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();});
Nach dem Login kopieren

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage