| 어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다. 초승달 모양 버튼 : `화이트/다크 모드` 전환 |
 |
저번 포스팅을 통해서 코드 하이라이트를 블로그에 수동으로 추가하여 적용해 보았습니다. 적용하지 않으신 분들은 아래 링크를 통해서 해당 코드 하이라이트를 적용하시고 아래 기능 추가 내용을 진행해 주시면 됩니다.
🔸 코드 하이라이트(코드블럭) 블로그에 적용하기
티스토리 블로그 - 코드 하이라이트(highlightjs) 적용
어두운 배경이 싫으시다면 페이지 우측 하단에 보이는 초승달 모양의 아이콘을 클릭하면 화이트모드로 변경됩니다.초승달 모양 버튼 : `화이트/다크 모드` 전환개발자 블로그 또는 티스토리의
rightnowhj.tistory.com
1. 줄 번호 추가하기
코드 하이라이트 각 라인별로 몇 번째 줄인 지를 나타내는 번호를 추가하는 작업입니다. 줄 번호는 단순히 출력용이므로 코드를 복사할 때는 줄번호는 복사가 되지 않아서 복사-붙여 넣기 할 때 전혀 문제가 발생하지 않습니다.
줄 번호를 넣기 위해서는 아래 URL 링크 정보를 HTML 편집에서 추가해야 합니다. HTML 편집화면으로 이동한 뒤 아래 코드를 복사하여 이전에 넣었던 하이라이트 스크립트 코드 아래에 붙여 넣기 합니다. (깔끔하게 정리한 버전은 아래에 따로 있습니다)
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
코드 하이라이트와 줄 번호 기능을 모두 추가하여 `</head>` 태그 위에 올려놓은 모습이고, 정리한 코드 내용은 아래와 같습니다. 위의 이미지의 제 HTML 소스가 주석도 있고 지저분해서 아래 깔끔하게 정리하였으니 복사해서 붙여 넣기 하시면 됩니다.
주석 처리한 코드들은 이전 스타일로 추가한 형태여서 지금은 다르게 쓰이거나 사용하지 않는 코드입니다. 티스토리도 시간이 지나면서 업데이트가 되는데, 이때 jquery 버전이 업데이트 됩니다.
이전에는 `hljs.lineNumbersBlock()` 이 부분이 호출이 되었는데 지금 버전에서는 호출이 안 되더군요. (not defined 오류 발생) 대신에 `hljs.initLineNumbersOnLoad()` 이 함수를 호출하면 바로 줄번호가 적용됩니다.
<!--Syntax Highlighter Start -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
</script>
<!--Syntax Highlighter End -->
2. 하이라이트 사용 언어 및 열기/닫기
코드 하이라이트의 언어가 무엇인지를 보여주는 레이블과 함께 코드 블럭을 열고 닫을 수 있는 버튼을 추가해 보겠습니다.
코드 출처 : https://alikong.tistory.com/39
아래 코드를 `</body>` 태그 바로 위에 넣어주시면 됩니다.
<!-- 코드 블럭 언어표시 스크립트 -->
<!-- 출처 : https://alikong.tistory.com/39 -->
<script>
$("pre[data-ke-type='codeblock']").each(function() {
var showTxt = "열기", hideTxt = "닫기", pre = this;
var code = this.dataset.keLanguage;
var $labelDiv = $("<div>");
var $labelBtn = $("<span>");
var $code = $(this).find("code").first();
var codeHtml = $code.html();
if (codeHtml.search('<hide/>\n') > -1 || pre.dataset.hide) {
$code.html(codeHtml.replace('<hide/>\n',''));
$labelBtn.text(showTxt);
$(this).hide();
$(this).attr('data-hide', 1);
} else {
$labelBtn.text(hideTxt);
$(this).show(); //줄번호 표시를 사용하고 있다면 이 줄은 주석 처리
}
$labelBtn.on("click", function() {
var txt = $(this).text();
$(this).text((txt==showTxt)?hideTxt:showTxt);
if (txt==showTxt) {
$(pre).removeAttr('data-hide');
}
$(pre).toggle();
});
$labelDiv.on("click", function() {
$labelBtn.triggerHandler("click");
});
$labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn);
$(this).before($codeLabel);
});
$(window).on("load", function() {
if ($('code').length) {
var col = window.getComputedStyle($('code').first()[0], null).getPropertyValue("color");
var bgc = window.getComputedStyle($('code').first()[0], null).getPropertyValue("background-color");
$('.codeLabel div').css({'color': col, 'background-color': bgc});
}
});
</script>이제 스타일을 편집하기 위해서 아래와 같이 CSS 코드를 추가해줍니다. CSS의 맨 아래에 붙여 넣기 하시면 됩니다.
/* 코드블럭 언어 표시 스타일 */
.codeLabel {
position: relative;
margin: 10px 0 0;
}
.codeLabel * {
user-select: none;
cursor: pointer;
font-size: 13px;
}
.codeLabel > div {
display: inline-block;
color: #ccc;
border-radius: 3px;
text-transform: uppercase;
background-color: #282c34;
padding: 6px 10px;
}
.codeLabel span {
color: #555;
margin: 0 0 0 10px;
}
.codeLabel span ~ label {
position: absolute;
right: 0;
top: 6px;
}
CSS까지 넣고 '적용' 버튼을 눌러 적용합니다. 그러면 코드블록 바로 위로 사용 언어명과 열기/닫기 버튼이 옆에 나타납니다. 열기 혹은 닫기 버튼을 누르면 코드블록이 열렸다 닫혔다 합니다.
3. 복사 버튼 추가
이번에는 코드블럭에 마우스를 올리면 우측 상단에 복사버튼이 나타나게 해 보겠습니다. 이 복사 버튼을 클릭하면 자동으로 코드가 복사되어 클립보드(Clipboard)에 저장됩니다.
코드 출처 : https://devskim.tistory.com/13
먼저 복사 버튼을 사용하기 위해서 CDN에서 제공하는 복사 스크립트를 가져오는 스크립트를 HTML에 추가해 보겠습니다. 아래 스크립트는 `</head>` 태그 위에 넣어주시면 됩니다.
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
그리고 아래 코드를 `</body>` 태그 위에 붙여넣기 합니다.
<!-- 코드 복사 버튼 추가 -->
<!-- https://devskim.tistory.com/13 -->
<script>
$(document).ready(function () {
$('pre[id^="code"],[class="bash"]').each(function (index, e) {
let button = document.createElement('button');
button.innerText = "Copy";
button.className = 'copy-button';
button.style.cursor = 'pointer';
button.setAttribute('data-clipboard-text', e.innerText);
button.addEventListener('mouseleave', function(event) {
event.currentTarget.setAttribute('class', 'copy-button');
event.currentTarget.removeAttribute('copy-message');
});
e.appendChild(button);
});
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function (e) {
e.clearSelection();
e.trigger.setAttribute('class', 'copy-button copy-message');
e.trigger.setAttribute('copy-message', 'Copied!');
setTimeout(() => {
$('.copy-button').removeClass('copy-message');
}, 500);
});
});
</script>
위 코드는 버튼을 코드 블록에 추가하고, 클릭했을 때 `copy-message`를 보여주면서 클립보드에 복사합니다. 아래 CSS 코드도 추가해 주어서 스타일을 적용합니다.
/* 코드 복사 버튼 스타일 */
pre {
text-align: start;
position: relative;
overflow: visible;
}
pre .copy-button {
font-family: Consolas;
opacity: 0;
position: absolute;
right: 2px;
top: 4px;
padding: 2px 6px;
color: #aaa;
background: rgba(0,0,0,.6);
border-radius: 5px;
transition: opacity .3s ease-in-out;
}
pre:hover .copy-button {
opacity: 1;
}
pre .copy-button:hover {
color: #eee;
transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
color: rgb(69, 128, 206);
transition: all ease-in-out 0.1s;
}
.copy-message:before {
font-family: Consolas;
content: attr(copy-message);
position: absolute;
left: -70px;
top: 0px;
padding: 2px 4px;
color: #fff;
background: rgba(0,0,0,.6);
border-radius: 5px;
}
CSS 코드에서 `.copy-message:before` 속성(마지막 부분)을 보면 `left: -70px;`의 값을 수정하면 복사 버튼 눌렀을 때 'Copied!'라는 글자가 뜨는 위치를 움직일 수 있습니다.
구독 및 좋아요는 컨텐츠를 생산하는데 많은 도움이 됩니다. 😊
감사합니다.