Rumah >hujung hadapan web >tutorial js >Kod panjang SyntaxHighlighter z-blog tidak boleh dibalut (berdasarkan jquery)_jquery
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; }
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();});
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.