티스토리 (``) 백틱으로 인라인 코드 삽입 방법

티스토리에서 -> `인라인 코드` <- 를 사용하는 기능이 없어서 방법을 찾아보다가 글을 작성하게 되었습니다!

현재 Poster 스킨을 사용하고 있어 글도 이에 맞춰 작성해보려고 합니다!

 

1. 블로그 설정 - 꾸미기 - 스킨 편집 - 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>` 태그 위에 코드를 붙여 넣기 해줍니다!

 

3. CSS 수정 📖

Poster 스킨 기준 html 편집에 들어가 css탭에서 ctrl+f를 눌러 `#article-view`를 검색해서 아래 css 스타일을 붙여넣기 해줍니다!

#article-view code {
  font-family: "Pretendard", Consolas, Monaco, monospace;
}

#article-view p code {
  padding: 2px 5px;
  border-radius: 3px;
  background: #efefef;
  margin: 0 2px;
  border: 1px solid #e0e0e0;
}

 

 

 

4. 결과 확인

 

결과를 확인해 보면 잘 적용된 걸 확인해 보실 수 있습니다!!

 

---

출처 🏷️

[Tips] implement `` inline code block to your blog - (티스토리 인라인 코드 블럭 사용하기)