백틱(`)으로 인라인 코드 적용하기 [hELLO 스킨]

요즘 블로그에 관심이 많다보니 블로그를 열심히 꾸미고 있다!

근데 노션과 다르게 티스토리에서 불편한 점은 인코드가 적용이 안된다는 점이다,,, 

그래서 인라인 코드를 적용할 수 있는 법을 찾아보았다.

 

해당 코드를 적용하면 백틱은 구현되지만, 더보기 버튼이 동작하지 않는 오류가 생긴다....

적용 방법은 간단하다.

블로그 설정 > 꾸미기 > 스킨 편집 > html 편집으로 들어가서 html의 </body> 태그 아래의 해당 코드를 추가해 주면 된다.

<!-- Inline code block Script -->
<script defer>
    window.addEventListener('load', () => {
    let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)");
    textNodes.forEach(node => {
    	node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
	});
    })
</script>
<!-- end of Inline code block Script -->

 

그러면

`Hello World!` 

이렇게 적용된 모습을 볼 수 있다!!!

 

+++ 업데이트 2026.01.07

접은글을 그동안 사용하지 않아서 몰랐는데 최신 글을 적으면서 접은 글이 동작하지 않는 오류를 발견하였다.

위에 코드를 적용하면 접은 글이 동작하지 않아서 아래의 블로그를 통해 코드를 수정하였다.

<!-- 백틱 incline -->
<script> 
  window.onload = function() { 
  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>

/* CSS에 추가하기 */
/* inline code block notion style */
.notion-code {
    font-family: Consolas !important;
    line-height: normal !important;
    background: rgba(135,131,120,0.15) !important;
    color: #EB5757 !important;
    border-radius: 3px !important;
    font-size: 85% !important;
    padding: 0.2em 0.4em !important;
    margin-right: 0.2em !important;
    display: inline-block !important;
}

참고했던 블로그!!!

[블로그] 티스토리 블로그 백틱(`)으로 인라인 코드 입력하기 (hELLO 스킨)