웹마스터 팁

안녕하세요 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 (그누보드에 적용하는 방법을 올리신 분)
제목 글쓴이 날짜
다른 서버 간 서브도메인 쿠키 공유 에이트 2018.08.04
요즘 제가 jquery 웹앱 솔루션을 개발했습니다. [1] file 안드류KIM 2018.04.03
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
단축url API 사용하시는 분들... 미스터강 2018.06.01
글 작성시 미리 저장된 서식 불러오기. [10] file 개돌 2009.07.09
[PHP] 이름 및 연락처 마스킹 처리 ppumweb 2018.05.21
새로운 쪽지 유무에 따라 이미지 변경하는 법 [2] 멀티비타민 2013.12.16
관리권한 없이도 특정그룹에게 비밀글 열람 및 댓글작성 권한 부여하는 방법 ( 부운영자등을 위해) sejin7940 2018.04.26
윈도우 8.1 및 윈도우10 에서 IIS + mysql + PHP 설치 [9] file HSJI 2014.07.21
게시판 본문읽기에서 컨텐츠 이미지와 텍스트 분리하여 출력하기 forest535 2018.04.09
EXIF 메타정보 필요하신 분 있으시면 forest535 2018.04.09