syntaxhighlighter 3.0.83 에 줄바꿈 (wrap) 적용하기

2.0 버전은 드래그 해서 복사하는 경우 줄번호까지 복사가 되는 불편함이 있어서
span 방식을 버리고 3.0 버전 부터는 textarea 로 바뀌었다고 하네요.
근데 요놈이 한줄에 들어가는 내용이 너무 길면 자동 줄바꿈이 되는게 아니라 스크롤바가 생겨서 너무 불편하더라구요. 그래서 여기저기 검색해보고 삽질도 열심히 하면서 방법을 찾았습니다.

핵심소스 원출처 : https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
----------------------------------------------------------------------------------------

다운 및 설치방법은 여기 링크에서.. http://alexgorbatchev.com/SyntaxHighlighter/




수정할 파일 : styles/shCore.css, 적용할 스킨의 view.skin.php

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. view.skin.php 끝에 아래 코드 추가

<!-- SyntaxHighlighter wrap 적용시 높이 구함 start -->
<script type="text/javascript">
function lineWrap(){
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 = 15;
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();
};
lineWrap();
$(window).resize(function(){lineWrap()});
</script>
<!-- SyntaxHighlighter wrap 적용시 높이 구함 end -->





2번에서 가로크기는 글씨크기가 크거나 긴 소스코드를 한꺼번에 쓰는 경우 줄번호도 늘어날테니 그건 본인 입맛에 맞게 수정해서 예쁘게 사용하세요.




참고 : 저는 숫자가 회색이 아니고 검정색으로 나오더라구요. 그래서 color: #afafaf; /*숫자색*/ 추가했구요. 테두리에 선 표시하고 싶으면 적용하는 테마.css의 .syntaxhighlighter 에 border 설정하시면 돼요. 이것 못 찾아서 한참 삽질했었네요..ㅋㅋ



----------------------------------------------------------------------------------------
게시판에 적용하는 방법 :
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=23112&sca=&sfl=wr_subject%7C%7Cwr_content&stx=syntaxhighlighter