웹마스터 팁
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 (그누보드에 적용하는 방법을 올리신 분)
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| EXIF 메타정보 필요하신 분 있으시면 | forest535 | 2018.04.09 |
| 게시판 본문읽기에서 컨텐츠 이미지와 텍스트 분리하여 출력하기 | forest535 | 2018.04.09 |
| 관리권한 없이도 특정그룹에게 비밀글 열람 및 댓글작성 권한 부여하는 방법 ( 부운영자등을 위해) | sejin7940 | 2018.04.26 |
| [PHP] 이름 및 연락처 마스킹 처리 [1] | ppumweb | 2018.05.21 |
| 단축url API 사용하시는 분들... | 미스터강 | 2018.06.01 |
게시판글 엑셀 파일 보내기 php7용
 | 황금날개 | 2018.06.05 |
|
도메인 변경 또는 설치 폴더 변경시 이미지 주소변경하기
| 해피정닷컴 | 2018.06.08 |
|
XE용 CKEditor v4.9.2 (다크 스킨 수정)
[4]
| 큰돌♡ | 2018.07.04 |
| DB를 손쉽게 관리 [1] | EISOFT | 2018.07.15 |
| Code-Highlighter 3.0.83 가로 스크롤바를 어디론가 보내 버리고 싶으신 분. | 달빛늑대 | 2018.07.16 |
|
Google 스프레드시트에서 구글 번역으로 XE 다국어 내용 만들기(Lang.xml 용도)
| 달빛늑대 | 2018.07.17 |
| act로 다른 페이지 보여주기 [1] | 이온디 | 2018.07.25 |
| 다른 서버 간 서브도메인 쿠키 공유 | 에이트 | 2018.08.04 |
| 썸네일 방식으로 이미지 원본 주소 가져오기 | 에이트 | 2018.08.22 |
| PHP 뮤텍스 락 설치법(memcached 활용) [1] | 에이트 | 2018.09.03 |
| PHP 뮤텍스 락 설치법(redis 활용) | 에이트 | 2018.09.11 |
| 무료 psd, html 탬플릿, 아이콘 사이트공유합니다. | 허허길드짱 | 2018.11.27 |
| file 모듈 insertFile() manual_insert 시 디렉토리생성 에러 문제 해결 방법 | onTrust | 2019.01.02 |
| 트윗버튼, 페어스북 좋아요 버튼, 카카오스토리 좋아요 버튼 태그 | elancer | 2019.03.11 |
| 무료이미지 다운 받을 수 있는 곳 | elancer | 2019.03.19 |