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

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

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

첨부파일

view.tail.skin.zip (1.3K) 83회 다운로드 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시에 간과한 사항을 보충하여 파일을 새로 업데이트합니다.

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