티스토리에 백틱으로 인라인 코드 블럭 만들기

들어가며

`Velog`에서 작성했던 글들을 `Tistory`로 이전하면서 `Tistory`에서도 인라인 코드 블럭을 적용할 수 있다는 사실을 이번에 처음 알게 되었다. 하지만 알아보니 굉장히 번거로운 과정을 거쳤어야 했다. 이 포스팅에선 인라인 코드 블럭을 쉽게 이용할 수 있는 방법과 그 과정에서 발생했던 시행착오에 대해서 기록한다.

 

기존의 인라인 코드 블럭 사용방법

마크다운을 이용할 때, 많은 개발자들은 백틱(`)을 활용하여 인라인 코드 블럭을 작성한다. 쉬운 방법으로 코드를 하이라이팅 할 수 있기 때문이라고 생각을 한다. 하지만 티스토리에서 인라인 코드 블럭을 작성하는 방법은 굉장히 번거롭다.

 

보통의 티스토리 유저들은 `기본 모드`를 이용하고 있을 것이라고 생각이 되는데, 그 상황에선 아래와 같은 작업을 해야 한다.

1. 마크 다운 모드로 변환
2. 백틱(`)을 이용해서 인라인 코드 블럭 작성
3. 기몬 모드로 변환

이런 과정을 매번 반복을 해줘야 하니 얼마나 귀찮을까..

마크다운처럼 백틱을 이용해서 인라인 코드 블럭을 작성할 수 있다면 얼마나 좋았을까... 라고 생각하며 검색을 해보았다.

 

 

백틱으로 작성한 부분을 인라인 코드 블럭으로 변환하기

검색을 해본 결과 몇몇 블로그를 찾을 수 있었고, 그 중에서 아래 블로그를 참고해서 js와 css를 적용했다.

[티스토리]10초만에 가능한 인라인 코드블록 편하게 적용하는 방법

 

적용하는 방법은 링크를 참고해서 작성을 하고, 이 부분에선 어떤 어려움이 있었는지에 대해서 다룬다.

 

아래 위 블로그의 댓글을 보니, html에 대해서 잘 몰라서 적용이 어려웠던 분들이 있던데, `<script></script>` 태그를 작성한 후 그 내부에 `js` 코드를 넣어주어야 한다.

 

우선, 나는 위의 코드를 적용해도 아무일도 발생하지 않았다. 처음엔 블로그의 스킨이 달라서 `querySelectorAll()`이 제대로 적용이 안되었나? 생각을 했다. 그래서 주어진 코드에 있는 `textNodes`를 콘솔에 찍어보았는데, 빈 배열이 리턴되는 것을 볼 수 있었다.

 

뭔가 이상하다고 생각해서 동일한 `querySelectorAll()` 코드를 콘솔에서 다시 작성하니 배열에 태그가 잡히는 것을 확인할 수 있었다. 이상했다.. `</body>` 앞에 스크립트 코드를 넣어주면 된다고 나와있고, 딱히 틀린 부분이 없다고 생각했다.

 

'`</body>`에 작성해도 전체 페이지가 로드가 되지 않아서 그럴 수 있나?' 라는 생각이 들었고, 주어진 코드를 `window.onload` 이벤트의 콜백 함수로 넣어봤더니 적용이 되었다.

<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>

 

 

인라인 코드 블럭에 CSS 적용하기

 

링크의 블로그에서는 인라인 블럭을 이용할 때, 노션과 같은 스타일로 출력하기를 원했고, 그에 해당하는 CSS 코드를 제공한다. 나 역시 이를 적용하고자 CSS를 추가했는데, 이것 역시 적용이 안되었다.

 

그 이유를 알아보려고 개발자도구를 이용해서 확인을 해보니 현재 적용 중인 스킨인 `hELLO`에서 설정한 스타일이 더 높은 우선순위를 가지고 있어서 적용이 되지 않았다.

 

이를 해결하기 위해선 `!important` 키워드를 붙히려고 했는데, 제공받은 css 코드가 태그에 적용된 css이기 때문에, 함부로 적용했다가 본래의 코드 블럭에도 적용이 될 까 걱정이 되었다. 스크립트를 잘 보면 아래와 같이 클래스를 작성한 것을 볼 수 있다. tag에 적용한 css 코드를 `notion-code` 클래스에 적용을 해주었고, 백틱으로 생성된 인라인 코드 블럭에게 해당 클래스를 주는 것으로 적용을 하였다.

<code class='notion-code'>$1</code>

 

 

마치며

지금까지의 내용을 보면 인라인 코드 블럭은 정말 자주 사용한다. 아주 간단한 방법으로 내용을 강조할 수 있어서 효과적이라고 생각하는데, 지금까지 이렇게 어렵게 적용했어야 했다는 사실에 놀라웠고, 티스토리가 정말 커스텀이 자유롭다는 사실을 한번 더 알았다.

 

REF

 

https://mu08.tistory.com/112

[티스토리]10초만에 가능한 인라인 코드블록 편하게 적용하는 방법