Rumah > hujung hadapan web > tutorial js > Kod panjang SyntaxHighlighter z-blog tidak boleh dibalut (berdasarkan jquery)_jquery

Kod panjang SyntaxHighlighter z-blog tidak boleh dibalut (berdasarkan jquery)_jquery

WBOY
Lepaskan: 2016-05-16 15:31:20
asal
1246 orang telah melayarinya

Rakan yang menggunakan pemalam penyerlahan sintaks SyntaxHighlighter mungkin menghadapi masalah paparan kod tanpa pemecahan baris Tiada penyelesaian untuk masalah ini di Internet. Ia telah mengganggu saya sejak sekian lama ia. Penyelesaiannya sebenarnya Mudah, mari kita bincangkan...

Penyelesaian:

Buka fail shCoreDefault.css, cari definisi .syntaxhighlighter textarea dan tambahkan ayat di hujung: word-break:break-all !important; paparan.

Memandangkan semua orang memanggil css yang berbeza, anda boleh mengubah suai css mengikut keperluan anda sendiri

Ujian mendapati ia tidak sah untuk versi 3.08 Anda boleh merujuk kepada kaedah berikut

Memandangkan blog saya terutamanya mengenai perkongsian kod, banyak kod yang disiarkan adalah sangat panjang. Banyak kali saya perlu membalutnya secara manual.

Tetapi saya tidak tahan hari ini. Cari penyelesaian dalam talian.

1. pengubahsuaian css:

Dalam folder: zb_systemADMINueditorthird-partySyntaxHighlighter

Tambah css dalam fail 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;
}
Salin selepas log masuk

2. Kod 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();});
Salin selepas log masuk

Kod di atas ialah kod yang panjang. Mari kita lihat sama ada semua orang telah bertukar kerjaya? ?

Kini, ketinggian nombor baris akan selaras dengan ketinggian kod.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan