Le code long de z-blog SyntaxHighlighter ne peut pas être encapsulé (basé sur jquery)_jquery

Les amis qui utilisent le plug-in de coloration syntaxique SyntaxHighlighter ont peut-être rencontré le problème de l'affichage du code sans sauts de ligne. Il n'y a pas de solution à ce problème sur Internet. Cela me dérange depuis longtemps. La solution est en fait simple, parlons-en...

Solution :

Ouvrez le fichier shCoreDefault.css, trouvez la définition de .syntaxhighlighter textarea, et ajoutez la phrase à la fin : word-break:break-all !important et c'est ok, ce qui signifie que le code est forcé de s'enrouler et afficher.

Puisque tout le monde appelle des CSS différents, vous pouvez modifier les CSS en fonction de vos propres besoins

Le test a révélé qu'il n'est pas valide pour la version 3.08. Vous pouvez vous référer à la méthode suivante

.

Comme mon blog porte principalement sur le partage de code, la plupart des codes publiés sont très longs. Plusieurs fois, je dois l'emballer manuellement.

Mais je ne peux tout simplement pas le supporter aujourd’hui. Trouvez une solution en ligne.

1. modification CSS :

Dans le dossier : zb_systemADMINueditorthird-partySyntaxHighlighter

Ajouter du CSS dans le fichier 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.Code Jquery :

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

Le code ci-dessus est un code long. Voyons si tout le monde a changé de carrière ? ?

Désormais, la hauteur du numéro de ligne sera cohérente avec la hauteur du code.