Syntax Highlight 게시판 및 댓글에 넣기 : 스마트에디터2 가능 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

Syntax Highlight 게시판 및 댓글에 넣기 : 스마트에디터2 가능 정보

Syntax Highlight 게시판 및 댓글에 넣기 : 스마트에디터2 가능

첨부파일

view.tail.skin.zip (1.3K) 56회 다운로드 2021-12-03 19:56:51
테스트한 버전5.4.18
호환 가능 버전5.4

본문

1. 첨부파일 압축을 풀고 원하는 게시판의 PC와 모바일 디렉토리에 넣어줍니다.

view.skin.php 와 같은 폴더입니다.

그누에서 사용해 온 것처럼 [ code] (빈칸없이)[ /code](빈칸없이) 의 중간에 코드를 넣어주시면 되겠습니다.

 

-----------

 

2. 기존에 배포된 코드 중 스마트에디터2 에서 한줄로 나오는 현상을 고쳤습니다.

물론 ceditor5 와 기본 텍스트형태에서도 이상없이 잘 나옵니다. 기타 그누의 기본으로 설치된 에디터 이외의 다른 에디터들은 확인해 보지 못했습니다.

 

----------

 

3. 기본 코드입니다.

이 코드를 다이렉트로 view.skin.php 의 가장 하단에 넣으셔도 상관없습니다.


<link rel=stylesheet href=//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-dark.min.css>
<script src=//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js></script>
<style>
pre { position:relative; -ms-overflow-style:none; }
pre::-webkit-scrollbar { display:none; }
.copyButton { position:absolute; cursor:pointer; top:10px; right:10px; }
</style>
<script>
copyImage = "http://www.mediaplayer.kr/main/wittazzurri/code/copy_hand.png";
copyMp3 = "http://www.mediaplayer.kr/main/wittazzurri/code/copy_sound.mp3";
document.write("<div class=cmt_contents style=display:none></div>");
commentZone = document.getElementsByClassName("cmt_contents");
cmtLimit = commentZone.length;
for (cmt = 0; cmt < cmtLimit; cmt++) commentZone[cmt].id = "cmt_num_" + (Number(cmt) + 1);
editorName = "<?php echo $board['bo_use_dhtml_editor'] ? $config['cf_editor'] : "none"; ?>";
function codeCopy() {
    copyText.style.display = "block";
    copyText.value = arguments[0].innerText.trim();
    copyText.select();
    document.execCommand("copy");
    copyText.style.display = "none";
    copySound.play();
    alert("COPY CODE!!!");
}
function hlMode() {
    this[arguments[0]].innerHTML = this[arguments[0]].innerHTML.replace(/\[code\]/gi, "<div name=code_" + arguments[0] + ">").replace(/\[\/code\]/gi, "</div>");
    nameN = document.getElementsByName("code_" + arguments[0]);
    for (n = 0; n < nameN.length; n++) {
        if (arguments[0] == "bo_v_con") {
            if (editorName == "smarteditor2") changeCode = (nameN[n].innerHTML.replace(/\<p\>/gi, "").replace(/\<\/p\>/gi, "<br>") + "<br>").replace(/\<br\>\<br\>/gi, "<br>");
            else if (editorName == "cheditor5") changeCode = nameN[n].innerHTML.replace(/<(\/p|p)([^>]*)>/gi, "") + "<br>";
            else if (editorName == "none") changeCode = nameN[n].innerHTML.replace(/\<br\>\<br\>/gi, "*br*").replace(/\<br\>/gi, "").replace(/\*br\*/gi, "<br>") + "<br>";
        }
        else changeCode = nameN[n].innerHTML.replace(/\<br\>\<br\>/gi, "*br*").replace(/\<br\>/gi, "").replace(/\*br\*/gi, "<br>") + "<br>"; 
        nameN[n].innerHTML = "<pre><code>" + changeCode + "<img class=copyButton src=" + copyImage + " onclick=codeCopy(parentElement)></code></pre>";
    }
}
hlGroup = ["bo_v_con"];
for (cmtPlus = 0; cmtPlus < cmtLimit; cmtPlus++) hlGroup.push(commentZone[cmtPlus].id);
for (hl in hlGroup) hlMode(hlGroup[hl]);
hljs.initHighlighting();
document.write("<textarea id=copyText style=display:none></textarea>");
document.write("<audio id=copySound src=" + copyMp3 + " ></audio>");
codeZone = document.getElementsByTagName("code");
for (cz = 0; cz < codeZone.length; cz++) {
    codeZone[cz].style.fontSize = "1rem";
    codeZone[cz].style.fontFamily = "times";
    codeZone[cz].style.padding = "20px";
    codeZone[cz].style.borderRadius = "15px";
    codeZone[cz].style.backgroundColor = "#000000";
}
</script>

 

----------

 

4. 위 코드 중 https://sir.kr/g5_skin/48614 을 사용하시는 분은 위의 코드를 하단에 붙여넣기 하면서 아래의 넉줄을 삭제하거나 주석처리 해 주세요. 댓글란에 아이디를 부여하는 소스가 중복이 되었습니다.

물론 삭제하지 않아도 상관은 없습니다.

 


document.write("<div class=cmt_contents style=display:none></div>");
commentZone = document.getElementsByClassName("cmt_contents");
cmtLimit = commentZone.length;
for (cmt = 0; cmt < cmtLimit; cmt++) commentZone[cmt].id = "cmt_num_" + (Number(cmt) + 1);

 

----------

 

5. 가장 아래의 코드는 코드블럭 영역의 스타일을 지정합니다.

 


    codeZone[cz].style.fontSize = "1rem";
    codeZone[cz].style.fontFamily = "times";
    codeZone[cz].style.padding = "20px";
    codeZone[cz].style.borderRadius = "15px";
    codeZone[cz].style.backgroundColor = "#000000";

 

저는 codeZone[cz].style.backgroundColor = "#000000"; 으로 주었는데 이걸 주석처리하면 원래 바탕으로 나타납니다. 기타 다른 배경을 사용하고 싶으면 색상코드를 바꿔주세요.

 

----------

 

6. 복사버튼 이미지와 효과음의 파일주소는 본인의 홈에 업로드해서 그 주소를 사용하세요.

 


copyImage = "http://www.mediaplayer.kr/main/wittazzurri/code/copy_hand.png";
copyMp3 = "http://www.mediaplayer.kr/main/wittazzurri/code/copy_sound.mp3";

 

----------

 

7. 이 코드블럭은 그누 5.4 에서만 실험하였습니다. 다른 테마나 빌더는 적용될지 알 수 없습니다.

크롬과 안드로이드에서만 확인하였고 기타 다른 사항에 대해서는 배려하지 않았습니다.

원래는 후킹파일로 만들까 하다가 코드블럭을 사용하고 싶지 않은 게시판도 있을 것 같아서 이런 형태로 만들었습니다.

복사된 코드는 상황에 따라 코드 상하단에 여백이 들어갈 수 있습니다.

 

----------

 

8. 도움이 되셨다면 추천 부탁드립니다.

 

---------------------

---------------------

 

2021년 12월 3일 오후 3시에 간과한 사항을 보충하여 파일을 새로 업데이트합니다.

파일 다운로드 받아가신 분들은 새로 받아가세요.

추천
6

댓글 전체

에디터 2개가 칸바꾸기 ₩n 을 <p><br></p> 와  <p></p> 두가지로 바꾸더라구요.
그래서 이프문으로 두 유형을 다른 정규식으로 파싱했습니다.
자바스크립트도 바닐라로 바꾸었구요.
어제 반나절을 쪼물딱거렸어요.ㅋ
감사합니다.
지금 적용해 봤어요.
cheditor5 게시판에 적용중입니다.
게시판 버전: Version 5.4.18
* 아래 오류는 smarteditor2로 변경 후 테스트 해도 동일한 증상입니다.

https://url.kr/g5/bbs/board.php?bo_table=coding_tips&wr_id=17

여기 한번 봐주세요.
다른 것은 잘 되는데..
이렇게 나오는 것들이 있어요. 원인이 뭘까요?

추가
https://url.kr/g5/bbs/board.php?bo_table=coding_tips&wr_id=19

여기 글도 틀어져 버리네요.
아래와 같이 글 수정하기하면 잘 보이는데..말입니다.

혹 텍스트에 pre 태그가 끼어 있을 수도 있고...
예전에 공유된 신택스 하일라이트 후킹파일이 있다면 충돌이 일어날 수 있어요.
후킹파일을 삭제해 보세요.
pre 태그도 없고 이전 소스도 지웠습니다.

혹시 괜찮으시면..
아래 코드 넣어서 테스트 한번 해 보실래요?

일반 텍스트만 입력해도 줄바꿈이 안됩니다.


<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>
그러네요. 제 게시판의 문제 같네요. 늦은시간 답변 감사합니다.
제 게시판에는 안맞는것 같아 원상복귀 했습니다. 다음에 해결되면 좋은 소스 적용하겠습니다.
꼭 필요한 소스를 공개해주셔서 정말 감사드립니다.
늘 감탄하면서 잘 사용하고 있습니다.
그누보드 define('G5_GNUBOARD_VER', '5.4.5.5');을 사용하고 있습니다.
copyImage = "http://pws.co.kr/zz/images/copy_hand.png"; // 복사버튼 이미지주소
copyMp3 = "http://pws.co.kr/zz/audio/copy_sound.mp3"; // 복사 효과음주소
위와 같이 이미지와 mp3 파일 경로를 제 홈페이지에 맞게
수정했습니다. 서버에 정상적으로 업로드 된 것을 확인했습니다.
theme basic를 사용하는데요, 코드는 잘 나오는데 code 복사버튼이 나오지 않습니다.
basic 순정에 적용해봐도 안나오고요.
http://pws.co.kr/bbs/board.php?bo_table=basic_syntax_hilight&wr_id=8
비타주리님의 테스트한 것(http://www.mediaplayer.kr/main/gnuworld/4)을 보면 복사버튼과 소리가 나면서 코드 복사가 잘 되는데요.
어디가 문제인지 잘 모르겠습니다.
게시판 설정에서 dhtml사용을 체크해보기도 하고, 체크해제해보기도 하고, 에디터를 cheditor5, smarteditor2를 선택해서 적용해봐도 복사버튼이 나오지 않는데요.
웹호스팅받는 그 호스팅의 문제인 것 같기도하고요.
감사합니다.

for (cz in codeZone) {
    codeZone[cz].style.fontSize = "1rem";
    codeZone[cz].style.fontFamily = "times";
    codeZone[cz].style.padding = "20px";
    codeZone[cz].style.borderRadius = "15px";
    codeZone[cz].style.backgroundColor = "#000000";
}
업데이트된 코드를 다시 다운로드해서 적용해보니까 잘 됩니다.
유용하게 잘 쓰겠습니다. 감사합니다 ^^
호기심에서 copyMp3에 3분짜리 음악파일을 넣어보니 복사할때 마다 음악이 끝까지 나옵니다.
효과음 대신에 폰으로 내 목소리를 녹음해서 적용해보았습니다.
http://pws.co.kr/bbs/board.php?bo_table=basic_syntax_hilight&wr_id=10

수고하셨습니다. 원래는 샘플예제에 재미로 비명소리를 넣으려다가...ㅋ
그런데 저절로 두 개가 만들어지는 건가요?
일부러 진공 [ code] 를 넣으신 건가요? 진공 엘레멘트는 복사버튼을 눌러도 복사되는 내용이 없을 텐데요...ㅜㅠ

원래 swf 를 주로 만졌던 분들은 많은 효과음을 가지고 있습니다.
갤러리의 이미지전환이나 장면변경시에 사르륵 또는 찰칵 하는 효과음을 주는 거지요.
그냥 알럿창만 띄우기에는 밋밋해서 효과음을 하나 줘 보았습니다.
업데이트된 코드를 다운 받아서 그대로 했습니다.
복사버튼이 저절로 두개 만들어 집니다.
저는 비타주리님께서 입력하는 글이 긴 경우를 생각해서 상단과 하단에 두개의 복사버튼을 만들어주신 것이 아닌가 생각했습니다.
아래 링크는 [code] 다음에 엔터를 쳐서 줄바꾸기를 하고, [code] 와 <!DOCTYPE html>사이에 공백을 넣으니까 그림처럼 나옵니다.
그리고 줄바꾸기하고 공백을 넣어도 복사는 잘 됩니다.
http://pws.co.kr/bbs/board.php?bo_table=basic_syntax_hilight&wr_id=11

복사버튼이 2개가 나오는 것이 이상한 일이네요.ㅜㅠ
5.4.5.5 이라시면 아무래도 그누 업그레이드를 안 하신 듯요...
저는 5.4.18 이라 무려 13단계나 높거든요. 그렇다고 제가 다운 그레이드를 해서 확인해 볼 수도 없고...

잘 사용하고 있습니다. 앞에서 복사버튼이 두개나오는 것에 대해서 문의 드렸는데요.
그누보드 최신버전(G5_GNUBOARD_VER', '5.4.18') 사용하고 있습니다. 업그레드와는 별 상관이 없는 것 같습니다.
코드를 넣을 때
 \[code\] 복사버튼 두개출력 \[code\]
이렇게 두번째에서 slash(/)를 빼니까 복사버튼이 두개 나오게 됩니다.(http://pws.co.kr/bbs/board.php?bo_table=free&wr_id=33)

그리고 알려주신 대로
\[code\]  복사버튼 한개출력\[/code\]
처럼 / 를 사용하니까 복사버튼이 한개 나옵니다.
(http://pws.co.kr/bbs/board.php?bo_table=free&wr_id=32)

왜 그런지는 모르겠습니다. 감사합니다 ^^
슬러시 없이 양옆으로 감으면 두개가 생기는 건 제가 짠 코드상으로는 지극히 정상입니다.
마감 쪽에는 반드시 슬러시를 넣어야 합니다.
전체 429
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT