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