티스토리 hello 스킨 커스텀 - 기본모드에서 백틱(`)으로 인라인 코드 사용하기

인라인 코드 예시

티스토리에서 글을 작성하며 가장 불편했던 점은 인라인 코드를 사용할 때 `HTML` 모드 또는 `마크다운` 모드로 전환 후 다시 기본 모드로 돌아와야 한다는 점이었다.

 

다른 포스트들에서 이를 해결하는 방법이 많이 올라와 있었지만 왜인지 제대로 적용되지 않았고 이를 해결하는 과정을 정리해보려 한다.

 

<script>
window.onload = () => {
  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 class='notion-code'>$1</code>`);
  });
}
</script>

 

인터넷에서 쉽게 찾을 수 있는 방법은 위 코드를 티스토리 `스킨편집 > HTML` 에서 `</body>` 태그 위에 붙여주는 것이었다. 하지만 위 코드를 적용해도 기본모드에서 백틱(`)으로 인라인 모드로 바뀌지 않았고, 직접 콘솔에 디버깅을 하며 그 이유를 찾았다.

 

결론적으로 위 코드가 동작하지 않은 이유는 `div.tt_article_useless_p_margin.contents_style` 에 해당하는 태그가 존재하지 않았기 때문이다.

 

마크다운 모드로 인라인 코드가 적용되는 태그를 직접 살펴보니 `contents_style` 클래스를 사용하고 있었다.

 

<script>
window.onload = () => {
    let textNodes = document.querySelectorAll("div.contents_style > *:not(figure):not(pre)");;
    textNodes.forEach(node => {
        node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, `<code>$1</code>`);
    });
    }
</script>

 

이를 반영해서 querySelectorAll() 내부의 클래스를 `div.contents_style` 로 수정하니 정상적으로 동작하는 것을 확인할 수 있었다.

 

`이제 기본모드에서도 백틱으로 인라인 코드를 사용할 수 있다!`