SyntaxHighlighter 구문 강조 플러그인을 사용하는 친구들은 줄바꿈 없이 코드가 표시되는 문제를 겪을 수 있습니다. 인터넷에는 이 문제에 대한 해결책이 없습니다. 해결책은 실제로 간단합니다. 이에 대해 이야기해 보겠습니다...
해결책:
shCoreDefault.css 파일을 열고 .syntaxhighlighter 텍스트 영역의 정의를 찾은 다음 끝에 다음 문장을 추가합니다. word-break:break-all !important; 그러면 괜찮습니다. 즉, 코드가 강제로 래핑되고 표시하다.
사람마다 다른 CSS를 호출하므로 필요에 따라 CSS를 수정할 수 있습니다
테스트 결과 3.08 버전에서는 유효하지 않은 것으로 확인되었습니다
.내 블로그는 주로 코드 공유를 다루기 때문에 게시된 코드 중 상당수가 매우 깁니다. 손으로 포장해야 하는 경우가 많습니다.
그런데 오늘은 도저히 참을 수가 없네요. 온라인에서 해결책을 찾아보세요.
1. CSS 수정:
폴더: zb_systemADMINueditorthird-partySyntaxHighlighter
shCoreDefault.pack.css 파일에 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. 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();});
위 코드는 긴 코드입니다. 모두가 직업을 바꿨는지 볼까요? ?
이제 줄 번호의 높이가 코드의 높이와 일치하게 됩니다.