다음과 같은 스크립트를 이용,
어찌어찌해서 본글과 댓글에 하이라이트 및 스타일적용하고,
라인넘버 붙이고, 우측상단에 카피버튼 툴바 붙이는데 까지는 성공했으나...
Copy
<link rel="stylesheet" href="<?php echo G5_JS_URL ?>/highlight_code/a11y-dark.min.css">
<script src="<?php echo G5_JS_URL ?>/highlight_code/highlight.min.js"></script>
<script src="<?php echo G5_JS_URL ?>/highlight_code/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
<!-- then add this badge component -->
<script src="<?php echo G5_JS_URL ?>/highlight_code/highlightjs-badge.min.js"></script>
<script>
setTimeout(function () {
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
var options = {
loadDelay: 0,
copyIconClass: "fa fa-copy",
checkIconClass: "fa fa-check text-success",
blogURL: "https://uquiz.kr/"
};
window.highlightJsBadge(options);
},10);
</script>
아래 그림처럼...
하지만, 마지막에 부딫친 문제가 우측상단의 복사버튼을 눌러 클립보드에 복사한후 다른 곳에 붙여넣기 하면,
Copy
<style type="text/css"><!--#goog-gt-tt {display:none !important;}.goog-te-banner-frame {display:none !important;}.goog-te-menu-value:hover {text-decoration:none !important;}.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}body {top:0 !important;}--></style>위처럼 원형대로 되지 않고 줄바꿈 없이 한줄로 쫘악 펼쳐저 버립니다.
만지작 거리다 발견한 점은,
Copy
<script src="<?php echo G5_JS_URL ?>/highlight_code/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>위 라인 넘버를 적용 안하면 문제없이 원형대로 줄바꿈되어 복사된다는 것을 발견했습니다. 아래처럼
Copy
<style type="text/css">
<!--
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}
-->
</style>고수님들께, 라인넘버 적용하고도, 위처럼 원형대로 복사하여 붙이기를 할 수 있는 방법에 대해 도움 요청드립니다.
### 링크 참고하셔서 도움주시면 감사하겠습니다. ^^
참고로, 제가 사용한 스타일 코드는 아래입니다.
Copy
.hljs{display:block;overflow-x:auto;padding:1.5em;background:#f0f0f0;font-size:1em;line-height:1.5em;}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag{font-weight:700;white-space:pre-wrap;}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800;}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#bc6060}.hljs-literal{color:#78a960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}/*default-style*/
/* Line Number CSS */
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #999;
border-right: 1px solid #CCC;
vertical-align: top;
width: 25px;
}
/* your custom style here */
.hljs-ln td.hljs-ln-code {
padding-left: 5px;
}
답변 3개 / 댓글 1개
3개월 전
BBEdit 같은 편집기에 붙여넣기 한 후에
다시 넣어 보세요.
그누스트랩
5년 전
이거 답변드릴려면 알려주신 예제를 직접 해보고 원인찾아서 알려주어야하는데 ..
예제를 볼수 있는 페이지를 남겨주면 도움주기 좋을듯합니다
답변에 대한 댓글 1개
5년 전
그누스트랩
5년 전
이거 답변드릴려면 알려주신 예제를 직접 해보고 원인찾아서 알려주어야하는데 ..
예제를 볼수 있는 페이지를 남겨주면 도움주기 좋을듯합니다
답변을 작성하려면 로그인이 필요합니다.
이곳에서 포인트를 사용해 받은 파일이라 동의없이 공개는 어렵구요
위 링크 참고해 주시겠어요?