웹마스터 팁
Code-Highlighter 3.0.83 가로 스크롤바를 어디론가 보내 버리고 싶으신 분.
2018.07.16 02:33
안녕하세요 6년만인가요... 너무 오랫만에 와서 흔적 좀 남기려... 예전에도 자주 오지는 않았지만...
Code-Highlighter 새 버전 3.0.83은 줄바꿈이 안되는 모양입니다? (혹시 저만 그런줄 알고 있는 건 아니겠죠?)
가로 스크롤 바를 없애 보려고 애쓰다 보니... 이렇게 해서 줄바꿈을 하고 있습니다.
우연히 보게 된 그누보드에 적용하느라 여기 저기 찾아 다니면서 삽질하셨다는 그 분께 감사의 말씀을 드리며...
XE에 적용해 보니 이렇게 하면 되더군요.
1.선택해서 사용하시는 테마의 shCoreXXXX.css 파일을 열어서 이렇게 넣어 주세요.
.syntaxhighlighter .line {
white-space: pre-wrap !important;
word-break: break-all !important;
}
줄번호는 다소 다를 수 있습니다. 그리고 word-break: 속성은 원하시는 것으로 바꾸시면 됩니다. (단어 단위로 줄바꿀 것인지...
글자단위로 줄빠꿈을 할 것인지 말이죠. 위의 경우는 글자 단위로 줄바꿈을 하게 됩니다)
break-all : 오버플로를 방지하기 위해 모든 문자에서 단어가 깨질 수 있습니다.
break-word : 오버플로를 방지하기 위해 임의의 지점에서 단어가 깨질 수 있습니다.
2.shCore.js 파일을 열어서 맨 끝에서 줄바꿈 하셔서 아래 스크립트를 넣어주세요.
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()});
우측의 코드는 CSS가 줄 바꿈 해주고 좌측의 번호는 자바스크립트가 줄 바꿈 해줍니다. 나중에는 어쩌면 가로 스크롤바가
보고싶어 질 수도 있겠습니다.
글을 다 적고 나니 뭔가를 빠트린 듯 희미한 불안감이... 사용하고 있는 것을 확인해 보고 빠진 것이 있으면 조속히 첨부
하겠습니다.
등록 할 때는 남아 있는 것 같은데... 더 손대지 말아야지. ㅡㅡ.
PS
추가로 해 준 것이 있네요. Editor 에서 Code-highlighter를 띄웠을 때에 첫번째 미리보기 버튼 클릭에만 반응 하는데, 미리보기 할 때마다 적용되어서 보여지려면 Popup.html 파일에 한줄 넣어주세요.
기존코드는 창 크기가 조절되면 발생하는 Event에 물려 있기는 한데 미리보기 할 때마다 창을 조절하기는 번거롭겠습니다.
3. Popup창 띄우고 미리보기 할 때 첫번째 화면에만 적용되는 문제
추가로 해 준 것이 있네요. Editor 에서 Code-highlighter를 띄웠을 때에 첫번째 미리보기 버튼 클릭에만 반응 하는데, 미리보기 할 때마다 적용되어서 보여지려면 Popup.html 파일에 한줄 넣어주세요.
window.SyntaxHighlighter.all(); lineWrap();줄번호는 다를 겁니다. 밑에서 몇번째 일텐데 window.SyntaxHighlighter.all(); 줄을 찾아 그 아래 lineWrap(); 줄만 넣어주세요.
기존코드는 창 크기가 조절되면 발생하는 Event에 물려 있기는 한데 미리보기 할 때마다 창을 조절하기는 번거롭겠습니다.
늘 평안들 하시길...
출처 : 참고페이지 : https://sir.kr/g4_tiptech/33028 (그누보드에 적용하는 방법을 올리신 분)
