[코드] 로 감싸면 SyntaxHighlight 가 적용되게 할려면,,
본문
로컬호스트에 제가 자작한 코드를 저장할려고 하는데요
[코드] 로 감싸면 SyntaxHighlight 가 적용되게 할려면,, 어떻게 해야 하나요?
-------------
** 내용을 [co.de]소스코드[/co.de] 로 감싸시면 SyntaxHighlight 가 적용됩니다.
답변 1
자바스크립트입니다.
<style>
#codeZone { font-size:1rem; font-family:times; padding:20px; background-color:#000000; }
#codeZone::-webkit-scrollbar { width:12px; height:12px; }
#codeZone::-webkit-scrollbar-thumb { background-color:#ffffff80;border-radius:12px; }
#codeZone::-webkit-scrollbar-track { background-color:#000000;border-radius:12px; }
#codeXmp { display:none; }
.hljs-comment, .hljs-quote { color:#d4d0ab; }
.hljs-variable, .hljs-template-variable, .hljs-tag,.hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-regexp, .hljs-deletion { color:#ffa07a; }
.hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link { color:#f5ab35; }
.hljs-attribute {color:#ffd700; }
.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition {color:#abe338; }
.hljs-title, .hljs-section { color:#00e0e0; }
.hljs-keyword, .hljs-selector-tag {color:#dcc6e0; }
.hljs { display:block; overflow-x:auto; background:#2b2b2b; color:#f8f8f2; padding:.5em; }
.hljs-emphasis { font-style:italic; }
.hljs-strong { font-weight:bold; }
@media screen and (-ms-high-contrast:active) {
.hljs-addition, .hljs-attribute, .hljs-built_in, .hljs-builtin-name, .hljs-bullet, .hljs-comment, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-string, .hljs-symbol, .hljs-type, .hljs-quote { color:highlight; }
.hljs-keyword, .hljs-selector-tag { font-weight:bold; }
}
</style>
<xmp id="codeXmp">
소스코드
</xmp>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
if (codeXmp.innerHTML.trim().length > 0) {
curlString = codeXmp.innerHTML.trim();
codeString = curlString.replace(/\</gi, "<").replace(/\>/gi, ">");
document.write("<div id='codeDiv' style='display:block'><pre style='margin:0px'><code id='codeZone'>" + codeString + "</code></pre></div>");
hljs.initHighlighting();
}
</script>
위의 것이 제가 사용하는 코드인데 xmp 안에 소스코드를 넣으면 됩니다만....
xmp 를 textarea 로 바꿔도 됩니다. 그럴경우
curlString = codeXmp.innerHTML.trim(); 를
curlString = codeXmp.value.trim(); 으로 교체해 주세요.
[co.de] [/co.de] 로 바꾸려면 위 소스를 참조하여 만들어 쓰세요.
답변을 작성하시기 전에 로그인 해주세요.
