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>
|