[티스토리] 인라인 코드 백틱(` `) 사용하기 / Notion 스타일로 테마 변경하기

내 블로그가 비록 기본 테마에 조금 후줄근(?)하지만ㅋㅋㅋㅋ
그래도 코드는 예쁘게 쓰고 싶어서 좀 손을 봐줬다 👍
 

1. 인라인 코드 편하게 사용하기

인라인 코드는  백틱을 이용해서 사용하고 싶은데, 티스토리의 기본 기능으로는 html모드에서 `<code></code>` 를 써줘야 했다. 그런데 한두 번도 아니고, 너무 귀찮은 거 아닌가..
그래서 기본모드에서 백틱을 사용해 바로 인라인 코드로 사용하는 방법을 찾아보았다.
 
결론적으로, 티스토리의 스킨편집에서 html 편집에 들어가서 `</body>` 위에 이 코드를 붙여 넣으면 된다.
 

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

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

참고한 감사한 블로그 : https://haruisshort.tistory.com/253

 
 

2.  Notion 노션 스타일로 바꿔주기

그런데 기본 인라인 코드 스타일이 좀 구린(?)것 같아서 깔끔하고 가독성 높다고 생각되는 노션 스타일로 바꿔줬다.
혹시 나중에 또 다른 스타일로 변경할 수 있으니 Notion 스타일이 무엇인지 사진으로 박제하기!

요런 느낌~

티스토리 스킨 변경 - html 변경 - CSS 에 들어가서 `code`해 해당되는 코드를 아래와 같이 바꿔준다.
 

code {
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 90%;
    margin: 0px 1px; 
    color: red;
}

 
 
그러면 이렇게 예쁘게 인라인 코드를 노션 스타일로 사용가능합니다 `yeah` 오예- 😆
 

참고한 감사한 블로그: https://haawron.tistory.com/43

 
그런데 이렇게 보다보니 내 코드블록 스타일도 좀 별로인 것 같네?ㅋㅋㅋㅋ
다음에는 코드블럭 테마를 변경하는 방법에 대해서 써봐야지 

---

+ 앗 그런데 티스토리 앱에서는 적용이 안된다!!! 왜지!!?? 😳