[티스토리] hELLO 스킨의 인라인 코드 블럭을 노션 스타일로 변경하기

이 글에서는 hELLO 스킨을 사용하는 티스토리 블로그에서 기본 글쓰기 모드에서도 백틱을 이용해 인라인 코드 블럭을 노션 스타일로 손쉽게 변경하는 방법을 소개한다. 간단한 코드 추가만으로 블로그의 가독성을 한층 더 높일 수 있다.

---

 

왜 인라인 코드 블럭을 노션 스타일로?

예시 : 디자인 테마별 노션 스타일 인라인 코드 블럭

 

코드를 포함하는 기술 블로그나 개발 관련 글에서 코드 블럭의 `가독성`은 매우 중요하다. 특히 문장 중간에 짧게 들어가는 인라인 코드의 경우, 주변 텍스트와 잘 구분되어야 독자가 내용을 쉽게 파악할 수 있다. 노션 스타일의 `인라인 코드 블럭`은 배경색과 텍스트 색상을 다르게 하여 시각적으로 명확하게 구분해 주고, `둥근` 모서리와 적절한 `패딩`으로 깔끔하고 보기 좋은 디자인을 제공한다. 이는 독자가 코드와 일반 텍스트를 빠르게 구분하고, 전체적인 글의 흐름을 방해받지 않도록 돕는 중요한 역할을 한다.

 

---

 

hELLO 스킨에 노션 스타일 적용하기

hELLO 스킨에 노션 스타일의 인라인 코드 블럭을 적용하려면 `HTML` 코드와 `CSS` 스타일을 추가해야 한다. 아래 단계를 따라 진행하면 쉽게 적용할 수 있다.

HTML 코드 추가

1. 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집으로 이동한다.
2. 오른쪽 상단의 html 편집 버튼을 클릭한다.
3. `</body>` 태그 바로 위에 아래 코드를 추가한다. 

<script defer>
document.addEventListener("DOMContentLoaded", function () {
    //인라인 code block 추가 (css파일에 .notion-code 클래스 생성)
    let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre), .post .content .info .summary");
    textNodes.forEach(node => {
        // 백틱(`)으로 감싸진 부분을 <code> 태그로 변경하고 notion-code 클래스 추가
        node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, `<code class='notion-code'>$1</code>`);
    });
}); 
</script>

`querySelectorAll`을 사용하여 특정 CSS 선택자에 해당하는 모든 HTML 요소를 선택하고, 각 요소의 innerHTML에서 백틱으로 감싸진 텍스트를 찾아 `<code class='notion-code'>` 태그로 변환한다.

 

---

 

CSS 스타일 추가

1. 스킨 편집 화면에서 CSS 편집을 선택한다.
2. 아래 CSS 코드를 파일의 가장 하단에 추가한다.

.notion-code {
    line-height: normal !important;
    background: rgba(135,131,120,0.15) !important;
    color: rgb(54 161 231) !important;
    border-radius: 3px !important;
    font-size: 85% !important;
    padding: 0.2em 0.4em !important;
    margin-right: 0.2em !important;
    display: inline-block !important;
}

.dark .notion-code {
  color: rgb(250, 156, 96) !important;
}

이 CSS 코드는 `.notion-code` 클래스가 적용된 요소에 노션 스타일의 시각적 속성을 부여한다. background와 color 속성으로 배경색과 글자색을 설정하고, border-radius, font-size, padding, margin-right, display 속성을 통해 디자인을 완성한다. `.dark .notion-code`는 다크 모드일 때 글자색을 변경하여 가독성을 유지하도록 한다.

 

---

 

마무리

이제 티스토리 hELLO 스킨에서 기본 글쓰기 모드로 글을 작성할 때도 백틱 기호를 사용하면 자동으로 노션 스타일의 인라인 코드 블럭이 적용된다. 작은 변화지만 글의 가독성을 크게 향상시키고, 더욱 전문적인 느낌을 줄 수 있다. 개발 관련 글이나 기술 정보를 공유하는 블로거라면 이 팁을 활용하여 독자들에게 더 좋은 읽기 경험을 제공할 수 있다.