내용

글번호 591
작성자 heojk
작성일 2017-02-12 10:29:55
제목 syntaxhighlighter 에 자동 줄바꿈 추가하기
내용 1. shCore.css에서 .syntaxhighlighter .line에서 pre를 pre-wrap으로 수정
.syntaxhighlighter .line { 
  white-space: pre-wrap !important; /*자동 줄바꿈하기*/ 
  word-break: break-word !important; /*자동 줄바꿈하기*/ 
} 
2. .syntaxhighlighter table td.gutter .line에 width: 20px !important; 추가
.syntaxhighlighter table td.gutter .line { 
  text-align: right !important; 
  padding: 0 0.5em 0 0.5em !important; 
  width: 20px !important; /*숫자칸 가로크기*/ 
  color: #afafaf; /*숫자색*/ 
} 
3. syntaxhighlighter 스크립트 추가 코드 아래에 다음 내용 추가
	<script type="text/javascript">
	  SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
	  SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기
	  SyntaxHighlighter.defaults["tab-size"] = 2; // 탭사이즈를 2로 설정
	  SyntaxHighlighter.all();
	 // 줄바꿈을 안하실 분들은 여기 부터 생략하세요.
	  function SyntaxlineWrap(){ // 줄바꿈을 위한 스크립트
	   var wrap = function () {
	        var elems = document.getElementsByClassName('syntaxhighlighter');
	        for (var j = 0; j < elems.length; ++j) {
	            var sh = elems[j];
	            var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
	            var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
	            var stand = 20;
	            for (var i = 0; i < gLines.length; ++i) {
	                var h = $(cLines[i]).height();
	                if (h != stand) {
	                    //console.log(i);
	                    gLines[i].setAttribute('style', 'height:' + h + 'px !important;');
	                }
	            }
	        }
	    };
	    var whenReady = function () {
	        if ($('.syntaxhighlighter').length === 0) {
	            setTimeout(whenReady, 800);
	        } else {
	            wrap();
	        }
	    };
	    whenReady();
	  }
	$(function(){
	   $(window).bind("load resize", function(){
	     SyntaxlineWrap();
	   });
	});
	</script>