hELLO 스킨 코드 하이라이트(highlight.js) 커스터마이징 가이드 (줄번호, 언어표시, 복사버튼, 인라인 코드블럭)

이전에 hELLO 스킨의 사용법과 스킨 옵션 설정 방법에 대해 소개해드렸는데요.
이번에는 hELLO에 내장된 `highlight.js(코드 문법 강조)`기능을 활용하는 방법과,
더 나아가 다양한 기능을 추가하는 커스터마이징 방법에 대해 알려드리겠습니다!

 

아직 hELLO 스킨을 적용하지 않으셨다면 먼저 아래 링크를 통해 스킨을 적용해주세요.

티스토리 hELLO 스킨 적용하기 (2025년 7월 기준 작성)

---

🧑‍💻 highlight.js 사용법

highlight.js는 흔히 '코드 하이라이트' 또는 '코드 블럭' 기능이라고 불리며,
프로그래밍 언어별로 테마를 적용하여 가독성 좋은 코드 뷰를 제공하는 기능입니다.

 

✍️ 사용 방법

1️⃣ 글 작성 시 상단 메뉴에서 ` ⋯`(더보기) 버튼을 클릭

2️⃣ 하위 메뉴에서 ‘코드 블럭’ 선택
3️⃣ 입력창이 나타나면 코드를 작성
4️⃣ 수정하고 싶다면 코드 블럭을 클릭 → 상단의 `<>` 버튼 클릭하여 수정 가능

 

(좌측) 코드블럭 추가하기 / (우측) 코드블럭 수정하기

 

// TestPlugin.cpp
 
// Copyright Epic Games, Inc. All Rights Reserved.
 
#include "TestPlugin.h"
 
#define LOCTEXT_NAMESPACE "FTestPluginModule"
 
void FTestPluginModule::StartupModule()
{
	// This code will execute after your module is loaded into memory; the exact timing is specified in the .uplugin file per-module
}
 
void FTestPluginModule::ShutdownModule()
{
	// This function may be called during shutdown to clean up your module.  For modules that support dynamic reloading,
	// we call this function before unloading the module.
}
 
#undef LOCTEXT_NAMESPACE
	
IMPLEMENT_MODULE( FTestPluginModule, TestPlugin );

---

 

🔢 줄 번호 추가하기

기본 코드 블럭에는 줄 번호 기능이 포함되어 있지 않습니다.
줄 번호를 추가하려면 아래 과정을 따라 진행해주세요:

 

🔧 1단계: HTML 편집

관리자 > [꾸미기] > [스킨 편집] > HTML 편집에서
`</head>` 태그 위쪽에 아래 스크립트를 추가합니다.

 

<!--Syntax highlighte line number 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.9.0/highlightjs-line-numbers.min.js"></script>

<script> 
    hljs.highlightAll();
    hljs.initLineNumbersOnLoad();
</script>
<!--Syntax highlighte line number end -->

 

🎨 2단계: CSS 편집

줄 번호가 붙지만 정렬이 흐트러질 수 있으므로,
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: #ccc;
	border-right: 2px solid #CCC;
	vertical-align: top;
	padding-right: 10px !important;
	/* your custom style here */
}

/* for block of code */
.hljs-ln-code {
	padding-left: 15px !important;
}

 

간단하게 코드 설명하면,

줄번호를 가운데 정렬하여 우측에 2px짜리 테두리선을 넣은 뒤,

테두리 선을 중심으로 좌측 10px, 우측 15px의 여백을 적용한 겁니다.

• .hljs-ln-numbers → 줄 번호 스타일
• .hljs-ln-code → 코드 본문 스타일

---

🧩 언어 표시 및 열기/닫기 버튼 추가

 

코드 블럭 상단에 언어명이 표시되고,
코드 블럭을 열고 닫을 수 있는 버튼을 추가해보겠습니다.

🔗 코드 출처: https://alikong.tistory.com/39

🔧 1단계: HTML 편집

`</body>` 태그 바로 위에 아래의 JavaScript 코드를 삽입합니다.

 

<!-- 코드 블럭 언어표시 스크립트 -->
<!-- 출처 : 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('&lt;hide/&gt;\n') > -1 || pre.dataset.hide) {
    $code.html(codeHtml.replace('&lt;hide/&gt;\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>

 

🎨 2단계: 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 내 아래 코드 부분을 찾아서 `margin-top: 1.25rem`을 주석 처리하면 여백이 사라집니다.

 

#article .contents_style figure,
#article .contents_style pre,
#article .contents_style table[data-ke-align],
#article .contents_style [data-ke-type=moreLess] {

  /* margin-top: 1.25rem; */

  margin-bottom: 1.25rem
}

 

코드 레이블과 닫기 버튼 추가한 모습

닫기 버튼을 누른 후 모습

---

📋 복사 버튼 추가하기

코드를 복사할 때 마우스로 드래그하는 것은 불편하죠.
클릭 한 번으로 복사되는 ‘Copy’ 버튼을 추가해보겠습니다!

🔗 코드 출처: https://devskim.tistory.com/13

🔧 1단계: HTML 편집

먼저 복사 버튼을 눌러 클립보드에 저장하는 복사 스크립트를 HTML에 추가하겠습니다.

아래 스크립트를 `</head>` 위에 넣어주시면 됩니다.

 

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

 

그리고 `</body>` 태그 위에 아래 스크립트를 넣습니다.

해당 스크립트가 본문 내용에서 코드 블럭을 찾아 그 위에 `Copy` 버튼을 추가하고

클릭하면 'Copied'라는 문구가 나타나고 클립보드에 코드블럭 내용을 복사하여 저장합니다.

 

<!-- 코드 복사 버튼 추가 -->
<!-- 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>

 

🎨 2단계: CSS 편집

복사 버튼의 디자인을 위한 CSS 코드를 맨 아래에 추가합니다.
복사 버튼 클릭 시 Copied라는 문구가 출력되며,
해당 코드 블럭이 클립보드에 복사됩니다.

 

/* 코드 복사 버튼 스타일 */
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;
}

 

코드 복사 버튼

---

🧾 인라인 코드블럭 사용하기

❓ 인라인 코드블럭이란?

인라인 코드블럭은 문장 중간에 코드처럼 강조된 글자를 넣을 때 사용하는 형태로,
HTML에서는 <code>내용</code>처럼 작성해야 합니다.

 

예시:

일반 문장 중 `print()`처럼 코드 강조가 들어가는 경우

 

😓 문제점

기본 방식은 HTML <code> 태그를 매번 수동으로 써야 하므로 작성하기 번거롭고 불편합니다.

 

✨ 해결 방법: 백틱(`)으로 인라인 코드 표현하기

백틱(키보드 숫자 1 왼쪽에 있는 ` 키)을 활용하여

본문 글 중간에 간단하게 (`이렇게`)코드 표현을 할 수 있도록 기능을 추가해보겠습니다.

🔗 코드 출처: [링크]

 

🔧 적용 방법

1️⃣ 관리자 페이지 → [꾸미기] → [스킨 편집] → HTML 편집
2️⃣ </body> 태그 바로 위에 아래의 스크립트 코드를 붙여넣기
3️⃣ 저장 후 적용

<script> 
  window.onload = function() { 
    // 백틱 inline code 
    // 접은글 div 임시방편 -> 접은글 안에는 백틱 적용 안되고 있음
    let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre):not(div):not(:has(a))");
    textNodes.forEach(node => {
      node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, `<code class='notion-code'>$1</code>`);
    });
  }
</script>

 

이제부터는 글을 작성할 때 <code> 태그 없이, 백틱(`)으로 글자를 앞, 뒤로 감싸주면

`코드처럼 강조할 글자` 이런 식으로 자동으로 인라인 코드 스타일이 적용됩니다.

 

hELLO에서의 인라인 코드블럭의 경우, 다크모드와 화이트모드 각각 다른 스타일로 적용됩니다.

저는 한 가지 스타일로 고정해서 사용하려고 아래와 같이 CSS를 추가하였습니다.

본인 스타일에 따라 아래 내용을 수정하여 사용하시면 됩니다.

 

/* 인라인 코드블럭 설정 */
#article .contents_style p code,
#article .contents_style ol[data-ke-list-type] code,
#article .contents_style ul[data-ke-list-type] code,
#article .contents_style table[data-ke-align] code,
#article .contents_style blockquote[data-ke-style=style2] code,
#article .contents_style blockquote[data-ke-style=style3] code {
  font-family: Consolas !important;
  line-height: normal;
  color: #ffe35a !important;
  border-radius: 3px;
  font-size: 100% !important;
  padding: 0.2em 0.4em;
  margin-right: 0.2em;
  display: inline-block;
}

---

이상 hELLO 스킨의 코드 하이라이트(highlight)에 여러가지 기능을 추가하고 스타일을 수정해보았습니다.

감사합니다! 😊

 

🎨 hELLO 스킨 설정 팁! (사이드바 크기, 이미지 고정, 코드 하이라이팅)

🎨 hELLO 스킨 설정 팁! (사이드바 크기, 이미지 고정, 코드 하이라이팅)