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

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

WBOY

Libérer： 2016-05-16 15:31:20

original

1242 Les gens l'ont consulté

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;
｝

Copier après la connexion

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

Copier après la connexion

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.