> 웹 프론트엔드 > JS 튜토리얼 > z-blog SyntaxHighlighter 긴 코드는 래핑할 수 없습니다(jquery 기반)_jquery

z-blog SyntaxHighlighter 긴 코드는 래핑할 수 없습니다(jquery 기반)_jquery

WBOY
풀어 주다: 2016-05-16 15:31:20
원래의
1243명이 탐색했습니다.

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();});
로그인 후 복사

위 코드는 긴 코드입니다. 모두가 직업을 바꿨는지 볼까요? ?

이제 줄 번호의 높이가 코드의 높이와 일치하게 됩니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿