코드블럭 Syntax 하일라이트 > 첨가게시판

----------
php는 뷰어버튼이 활성화되지 않습니다.^^

기본코드
<?php include_once(G5_PATH."/plugin/wittazzurri/syntax_highlight/wittazzurri.php"); ?>

----------

[code]
<script>
pcSize = "450px"; // pc 가로세로 픽셀
mobileSize = "250px"; // 모바일 가로세로 픽셀
pcBorder = 10; // pc 테두리 픽셀 - 트랙바 굵기
mobileBorder = 7; // 모바일 테두리 픽셀 - 트랙바 굵기
baseColor = "#ffffff"; // 기본 색상
trackColor = "#81bef7"; // 트랙바 색상
startMode = 0; // 최초시작번호 0은 랜덤시작
playButton = "https://blog.kakaocdn.net/dn/1aY1b/btrvZ309K9P/sG5NEaf9zdImHuywWo9HF1/img.png" // 재생버튼주소
stopButton = "https://blog.kakaocdn.net/dn/bL3YN6/btrv5mEIyno/Ocj1pX1nrIRJ3I8flDIUG0/img.png" // 정지버튼주소
mediaList_1 = ["https://blog.kakaocdn.net/dn/A4F2B/btr0BBkZj8o/Tu4jHKp4ZiUxpWX8DkoKBK/tfile.mp3", "꿈에", "https://blog.kakaocdn.net/dn/ckP7nv/btr0yi7MWCF/KyU0aj2pKVgmkuJ0xh7GC0/img.jpg"];
mediaList_2 = ["https://blog.kakaocdn.net/dn/MV8NM/btr0yPxsaJF/4nySiy2UE2m3XAFYTmCDxk/tfile.mp3", "그대 내맘에 들어오면은", "https://blog.kakaocdn.net/dn/b601F0/btr0BEB0WeI/cr4bB84KrJloxG6nQZkaG0/img.jpg"];
mediaList_3 = ["https://blog.kakaocdn.net/dn/mekLq/btr0w2xCXv1/KGmqRCbvVFDZch0sTGd97K/tfile.mp3", "나의 옛날 이야기", "https://blog.kakaocdn.net/dn/mplRL/btr0zTfkEK3/DjcYYDpcjYvkYQWAipnjmk/img.jpg"];
mediaList_4 = ["https://blog.kakaocdn.net/dn/bOD8Aw/btr0r59rqhg/uw8KUJs1VkWhyp2bhUd74K/tfile.mp3", "사랑하는 여인에게", "https://blog.kakaocdn.net/dn/bHqI1S/btr0BDC6Z9N/7JTK6XmHXmBbK2AsNZTDuK/img.jpg"];
mediaList_5 = ["https://blog.kakaocdn.net/dn/GPAdZ/btr0yOZDkEO/e8dPd7kihFQzwK9ouLEE91/tfile.mp3", "슬픈 노래는 부르지 않을거야", "https://blog.kakaocdn.net/dn/dbnAOs/btr0AxpB873/u7b91gCA4nvKPARYwd6kV0/img.jpg"];
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">
<style>
@font-face { font-family:'NEXON Lv1 Gothic OTF'; src:url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); }
#titleDiv { max-width:960px; margin:0 auto; padding:12px; text-align:center; background-color:#d5e6f9; border:1px solid #cccccc; border-bottom:none; box-sizing:border-box; }
#titleDiv span { font-family:'NEXON Lv1 Gothic OTF'; font-size:16px; font-weight:bold; color:#0000000; cursor:pointer; }
#playerDiv { max-width:960px; margin:0 auto; padding:40px 0px 40px 0px; border:1px solid #cccccc; box-sizing:border-box; background:linear-gradient(135deg, #effbf8 30%, #ffffff 30% 70%, #efeffb 70%); }
#playerDiv div { margin:0 auto; }
#circlePlayer { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; border-radius:50%; box-shadow:0px 0px 8px 3px #dddddd; }
#circlePlayer div { cursor:default; background:radial-gradient(#ffffff 65%, #ffffff00 65%); border-radius:50%; }
#circlePlayer div img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; clip-path:circle(50%); }
#buttonTable { position:absolute; cursor:default; width:100%; table-layout:fixed; clip-path:circle(50%); }
#buttonTable td { font-family:NanumSquare; font-size:16px; font-weight:bold; color:#eeeeee; text-shadow:2px 2px 4px #000000; }
#buttonTable img { width:50px; cursor:pointer; }
#listDiv .list-div { font-family:'NEXON Lv1 Gothic OTF'; font-size:16px; padding:12px; color:#000000; cursor:pointer; text-align:center; border:1px solid #cccccc; border-top:none; box-sizing:border-box; }
@media screen and (hover:none) and (pointer:coarse) {
   #titleDiv { padding:8px; }
    #titleDiv span, #buttonTable td { font-size:14px; }
    #playerDiv { padding:30px 0px 30px 0px; }
    #buttonTable img { width:40px; }
    #listDiv .list-div { font-size:14px; padding:8px; }
}   
</style>
<div id="titleDiv">
    <span style="float:left">◀◀</span><span style="cursor:default"></span><span style="float:right">▶▶</span>
    <span style="clear:both"><audio id="mediaPlayer" autoplay></audio></span>
</div>
<div id="playerDiv">
<div><div id="circlePlayer">
<div><img onerror="src=mediaList_1[2]"></div>
<table id="buttonTable"><td style="text-align:right"></td><td style="text-align:center"><img><img></td><td></td></table>
</div></div>
</div>
<div id="listDiv" style="max-width:960px;margin:0 auto"></div>
<script>
trackMode = goMode = 1;
playerSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? mobileSize : pcSize;
playerBorder = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? mobileBorder : pcBorder;
playerDiv.querySelector("div").style.width = playerDiv.querySelector("div").style.height = circlePlayer.style.width = circlePlayer.style.height = playerSize;
circlePlayer.querySelector("div").style.width = circlePlayer.querySelector("div").style.height = circlePlayer.offsetWidth - playerBorder * 2 + "px";
buttonTable.querySelector("img:nth-of-type(1)").src = playButton;
buttonTable.querySelector("img:nth-of-type(2)").src = stopButton;
for (mediaTotal = 0; this["mediaList_" + (mediaTotal + 1)]; mediaTotal++);
for (media = 1; media <= mediaTotal; media++) listDiv.innerHTML += "<div class='list-div' onclick='mediaMode(" + media + ")'>" + this["mediaList_" + media][1] + "</div>";
function mediaMode() {
    if (arguments[0] == "prev") {
        goMode = 0;
        mediaNumber = mediaNumber == 1 ? mediaTotal : --mediaNumber;
    }
    else if (arguments[0] == "next") {
        goMobe = 1;
        mediaNumber = mediaNumber == mediaTotal ? 1 : ++mediaNumber;
    }
    else {
        goMode = goMode;
        mediaNumber = arguments[0];
    }
    trackDegree(0);
    mediaPlayer.src = this["mediaList_" + mediaNumber][0]; 
    circlePlayer.querySelector("div img").src = this["mediaList_" + mediaNumber][2]; 
    titleDiv.querySelector("span:nth-of-type(2)").innerText = this["mediaList_" + mediaNumber][1];
    for (list_media = 0; list_media < mediaTotal; list_media++) {
        listDiv.querySelectorAll(".list-div")[list_media].style.fontWeight = list_media == mediaNumber - 1 ? "bold" : "normal";
        listDiv.querySelectorAll(".list-div")[list_media].style.backgroundColor = list_media == mediaNumber - 1 ? "#f7d7e4" : "#fbf8ef";
    }
    buttonTable.querySelector("img:nth-of-type(1)").onclick();
}
function trackDegree() { circlePlayer.style.backgroundImage = "conic-gradient(" + trackColor + " 0deg, " + trackColor + " " + arguments[0] + "deg, " + baseColor + " " + arguments[0] + "deg)"; }
function currentAngle(...xy) {
    if (xy[1] == xy[3]) normalAngle = xy[2] < xy[0] ? -90 : 90;
    else if (xy[0] == xy[2] && xy[3] > xy[1]) normalAngle = 180;
    else {
        normalAngle = Math.atan((xy[2] - xy[0]) / (xy[1] - xy[3])) * 180 / Math.PI;
        if (xy[3] > xy[1] && xy[2] > xy[0]) normalAngle = 180 + normalAngle;
        else if (xy[3] > xy[1] && xy[2] < xy[0]) normalAngle = -180 + normalAngle;
    }
    eventAngle = normalAngle < 0 ? normalAngle + 360 : normalAngle;
    return eventAngle;
}
function trackPoint() {
    if (mediaPlayer.currentTime > 0) {
        trackDegree(360 * mediaPlayer.currentTime / mediaPlayer.duration);
        buttonTable.querySelector("td:nth-of-type(1)").innerText = ("0" + Math.floor(mediaPlayer.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(mediaPlayer.currentTime % 60)).slice(-2);
        buttonTable.querySelector("td:nth-of-type(3)").innerText = ("0" + Math.floor(mediaPlayer.duration / 60)).slice(-2) + ":" + ("0" +
        Math.floor(mediaPlayer.duration % 60)).slice(-2);
    }
    else buttonTable.querySelector("td:nth-of-type(1)").innerText = buttonTable.querySelector("td:nth-of-type(3)").innerText = "00:00";
}
mediaPlayer.onended = () => { mediaMode(goMode ? "next" : "prev"); }
titleDiv.querySelector("span:nth-of-type(1)").onclick = () => { mediaMode("prev"); }
titleDiv.querySelector("span:nth-of-type(3)").onclick = () => { mediaMode("next"); }
buttonTable.querySelector("img:nth-of-type(1)").onclick = function() {
    mediaPlayer.play();
    buttonTable.querySelector("img:nth-of-type(1)").style.display = "none";
    buttonTable.querySelector("img:nth-of-type(2)").style.display = "inline-block";
}
buttonTable.querySelector("img:nth-of-type(2)").onclick = function() {
    mediaPlayer.pause();
    buttonTable.querySelector("img:nth-of-type(1)").style.display = "inline-block";
    buttonTable.querySelector("img:nth-of-type(2)").style.display = "none";
}
circlePlayer.onclick = (xy) => {
    if (trackMode) {
        mediaPlayer.currentTime = currentAngle(circlePlayer.offsetWidth / 2, circlePlayer.offsetHeight / 2, xy.offsetX, xy.offsetY) * mediaPlayer.duration / 360;
        trackPoint();
        buttonTable.querySelector("img:nth-of-type(1)").onclick();
    }
}
circlePlayer.querySelector("div").onmouseover = buttonTable.onmouseover = () => { trackMode = 0; }
circlePlayer.querySelector("div").onmouseout = () => { trackMode = 1; }
trackDegree(0);
setInterval(trackPoint, 500);
titleDiv.querySelector("span:nth-of-type(1)").onmousedown = titleDiv.querySelector("span:nth-of-type(3)").onmousedown = function() { this.style.color = "#c00000"; }
titleDiv.querySelector("span:nth-of-type(1)").onmouseout = titleDiv.querySelector("span:nth-of-type(3)").onmouseout = titleDiv.querySelector("span:nth-of-type(1)").onmouseup = titleDiv.querySelector("span:nth-of-type(3)").onmouseup = function() { this.style.color = "#000000"; }
for (list_div of listDiv.querySelectorAll(".list-div")) {
    list_div.onmousedown = function() { this.style.color = "#c00000"; }
    list_div.onmouseout = list_div.onmouseup = function() { this.style.color = "#000000"; }
}
startNumber = startMode > 0 && startMode <= mediaTotal ? startMode : Math.floor(Math.random() * mediaTotal + 1);
mediaMode(startNumber);
</script>
[/code]