웹마스터 팁

  2. Support
  3. 웹마스터 팁

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: 속성은 원하시는 것으로 바꾸시면 됩니다. (단어 단위로 줄바꿀 것인지...
글자단위로 줄빠꿈을 할 것인지 말이죠. 위의 경우는 글자 단위로 줄바꿈을 하게 됩니다)
 
normal : 기본값. 기본 줄 바꿈 규칙을 사용합니다.
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:튀어 나가는걸 잡아 보려니... 스타일 속성중에 필터링 되는 것이 있는 모양입니다. 수정 클릭하고 들어오면 overflow:hidden 가 사라지는군요.
등록 할 때는 남아 있는 것 같은데... 더 손대지 말아야지. ㅡㅡ.
 
PS

3. Popup창 띄우고 미리보기 할 때 첫번째 화면에만 적용되는 문제


추가로 해 준 것이 있네요. Editor 에서 Code-highlighter를 띄웠을 때에 첫번째 미리보기 버튼 클릭에만 반응 하는데, 미리보기 할 때마다 적용되어서 보여지려면 Popup.html 파일에 한줄 넣어주세요. 
         window.SyntaxHighlighter.all();
         lineWrap();
줄번호는 다를 겁니다. 밑에서 몇번째 일텐데 window.SyntaxHighlighter.all(); 줄을 찾아 그 아래 lineWrap(); 줄만 넣어주세요.
기존코드는 창 크기가 조절되면 발생하는 Event에 물려 있기는 한데 미리보기 할 때마다 창을 조절하기는 번거롭겠습니다.
 
 
늘 평안들 하시길...
 
 
출처 : 참고페이지 : https://sir.kr/g4_tiptech/33028 (그누보드에 적용하는 방법을 올리신 분)
이 게시물을
좋아요
목록
제목 글쓴이 날짜
(회원가입) 닉네임 필요없이 이름만 입력 받으려면 [16] Simulz 2007.08.22
rewrite mod 설정, 해지 [1] 아름드리479 2007.08.22
설치환경을 갖추어도 설치시 문제 [1] 하얀후니 2007.08.22
로고 위치 변경하기 [4] 김영훈715 2007.08.21
홈페이지 주소 고정시키기 [12] file :에반: 2007.08.21
zbxe 일주일 사용기 및 팁 [1] 팔공산 2007.08.21
layout skin 제작시 info.xml도 잘 보세요 [1] 바람처럼.. 2007.08.21
페이지 수정시 메뉴들 가지런히 놓이게 하기 [3] 팔공산 2007.08.21
(수정) ZBXE 설치/로그인 등이 안될 때 시도해보세요. (MySQL DB) 핑크플로이드 2007.08.20
OpenID 적용 [6] file 맑은하늘75 2007.08.20
게시판에 나타나는 이름을 실명으로 나타내자! [5] 박영주964 2007.08.19
각 메뉴 옆에 게시물 갯수 표시하기 [6] coolsushi 2007.08.19
본문 하단에 (애드센스)광고 넣기 [2] roresy 2007.08.19
한글 경로가 404 에러로 뜨는 경우 처리방법 [2] 베니 2007.08.18
404 페이지 못찾음으로 나오는 문제 수정 [9] 화니군 2007.08.18
리눅스에서 제로보드 xe를 위한 환경 구축하기 [6] 써니a 2007.08.18
사이트접속시 제로보드XE폴더로 이동되게 하는 쉬운방법 [8] 부찬™ 2007.08.17
위지웍 에디터 웹폰트 사용하기 [6] 최지연 2007.08.17
서브 메뉴 배경색 바꾸기 [4] file Chang-Jo(창조) 2007.08.17
4차 서브메뉴 사용하기!! [4] [1] file 럭키587 2007.08.17
태그 쓰기