웹마스터 팁

안녕하세요 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 (그누보드에 적용하는 방법을 올리신 분)
제목 글쓴이 날짜
단축url API 사용하시는 분들... 미스터강 2018.06.01
확장변수값 계산하여 게시판 리스트에 출력하기(총계 게시판) [1] file klaist 2009.11.30
PHP 뮤텍스 락 설치법(memcached 활용) [1] 에이트 2018.09.03
PHP 뮤텍스 락 설치법(redis 활용) 에이트 2018.09.11
위젯 가운데 정렬 하는법 [3] 불금 2015.07.05
요즘 제가 jquery 웹앱 솔루션을 개발했습니다. [2] file 안드류KIM 2018.04.03
썸네일 방식으로 이미지 원본 주소 가져오기 에이트 2018.08.22
다른 서버 간 서브도메인 쿠키 공유 에이트 2018.08.04
DB를 손쉽게 관리 [1] EISOFT 2018.07.15
act로 다른 페이지 보여주기 이온디 2018.07.25
CKEditor 이용시 몇가지 유용한 설정 [11] prologos 2015.05.02
Google 스프레드시트에서 구글 번역으로 XE 다국어 내용 만들기(Lang.xml 용도) file 달빛늑대 2018.07.17
Code-Highlighter 3.0.83 가로 스크롤바를 어디론가 보내 버리고 싶으신 분. 달빛늑대 2018.07.16
XE용 CKEditor v4.9.2 (다크 스킨 수정) file 큰돌♡ 2018.07.04
[수정]알림센터 Lite에 메일발송 기능을 추가하기 [13] file 매실茶 2013.11.25
고정도메인 host 변경하기 해피정닷컴 2016.03.11
도메인 변경 또는 설치 폴더 변경시 이미지 주소변경하기 file 해피정닷컴 2018.06.08
게시판글 엑셀 파일 보내기 php7용 file 황금날개 2018.06.05
글 작성시 미리 저장된 서식 불러오기. [10] file 개돌 2009.07.09
[PHP] 이름 및 연락처 마스킹 처리 ppumweb 2018.05.21