티스토리 코드블럭에 chatGPT 스타일 적용하기

요즘 chatGPT 사용 시 코드블럭이 마음에 들어서 블로그에도 적용하고 싶었다. 어두운 바탕에 copy 헤드를 추가하는 것이다.

 

 

1. HTML 편집으로 들어가서 head에 cdn 스크립트를 추가한다. 

나는 highlight.js의 androidstudio 스타일을 적용했다.

<!-- 코드블럭 style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/androidstudio.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- 코드블럭 copy -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

 

 

2. body에 copy기능 스크립트를 추가한다.

<!-- 코드블럭 copy Start -->
<script>
$(document).ready(function() {
$("pre[data-ke-type='codeblock']").each(function(index, element) {
  var $codeBlock = $(element);
  var $codeHeader = $('<div class="code-block-header">')
    .append($('<span class="code-language">').text(this.dataset.keLanguage))
    .append($('<button class="code-copy-btn">Copy code</button>'))
    .insertBefore($codeBlock);
  $codeHeader.find('.code-copy-btn').attr('data-clipboard-text', $codeBlock.text());
});

new ClipboardJS('.code-copy-btn', {
  text: function(trigger) {
  return trigger.getAttribute('data-clipboard-text');
  }
});

$('.code-copy-btn').click(function() {
  var $this = $(this);
  var originalText = $this.text();
  $this.text('Copied!');
  setTimeout(function() {
    $this.text(originalText);
}, 1000);
});

});
</script>
<!-- 코드블럭 copy End -->

 

 

3. CSS 편집으로 들어가서 맨 마지막에 추가해준다.

/* 코드블럭 시작 */
.hljs {
  border-bottom-left-radius : 0.375rem;
  border-bottom-right-radius: 0.375rem;
  border: 0px!important;
}

.code-block-header {
  background-color: #212121;
  color: #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-family: Noto Sans KR;
  padding: 0.5rem 1rem;
  border-top-left-radius: 0.375rem; /* Add top-left border radius */
  border-top-right-radius: 0.375rem; /* Add top-right border radius */
}

.code-copy-btn {
  background-color: rgba(0, 0, 0, 0);
  color: #dddddd;
  border: none;
  cursor: pointer;
}
/* 코드블럭 끝*/

 

 

정말 깔끔하고 마음에 든다.

 

 

 

 

참고

https://bestwizard.tistory.com/113

티스토리 블로그에 코드블럭(codeblock) 스타일 적용하기