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

++ 2024.02.24
티스토리 블로그 테마를 정상우 개발자님의 hELLO 테마로 변경함에 따라 아래 내용은 지금 보이는 글과 다를 수 있습니다.
아래의 글을 참고해주세요!

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

평소에 마크다운으로 글을 작성하던 것이 편했던 나에게 티스토리 블로그의 기본모드를 사용하는 데에 오히려 불편한 점들이 있다..

그중 하나가 인라인코드를 백틱(`)으로 입력하지 못하는 것이다.

티스토리 블로그는 어느 정도 커스텀이 가능하다는 것을 알고 있었기 때문에, 검색해서 백틱(`)으로 인라인코드를 입력하도록 적용해 보았다.

역시 지나고 보면 도움이 되지 않는 경험은 없는 것 같다.

깃허브 블로그를 작성하면서 정말 힘든 부분들도 많았지만, 티스토리 블로그를 쓰는 과정에서는 오히려 익숙하고 편하게 수정할 수 있다.

1. 블로그 설정 > 꾸미기 > 스킨 편집 > html 편집

html 편집

HTML에 코드를 넣어줘야 하기 때문에 블로그 설정에서 html 편집으로 들어가자.

2. 코드 삽입

<!-- Inline code block Script -->
<script>
  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 -->

위의 코드를 `</body>` 태그 바로 위에 붙여 넣자.

html 코드 삽입

 

이렇게 하면 설정 끝이다!

 

이제 글을 쓸 때 백틱(`)으로 쓰면 인라인 코드로 된다.

`이렇게`

 

코드블럭 디자인 변경

나는 Book Club 스킨을 쓰고 있는데, 인라인코드를 적용해도 아무런 차이가 없어서 CSS를 건드려줬다.

 

아래의 코드를 CSS 부분에 넣어주면 된다.

code {
    padding: 0.25rem;
    background-color: #f0f0f0;
    border: 1px solid #dadada;
    color: #d07d7d;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.1rem;
    margin: 0 5px;
}

CSS 코드