티스토리 인라인 코드 커스텀(1) 인라인 코드 쉽게 적용하기

기본적으로 티스토리에서 인라인 코드를 사용하는 방법은 두 가지입니다

• 마크다운 모드에서 백틱(`)으로 감싸기
• HTML 모드에서 <code></code>로 감싸기

이 둘 다 모드를 바꾼 뒤에 수정해야 하는 불편함이 있습니다.

 

좀 더 쉽게 사용할 수 있는 방법이 있을까 해서 찾아보다가 모드의 변환 없이 기본모드에서도 백틱(')을 활용한 인라인 코드를 사용하는 방법이 있어서 정리해 보도록 하겠습니다.

---

 

적용하기

방법은 아주 간단합니다

• 블로그 관리> 스킨 편집에 들어가서 

• HTML 편집으로 들어간 후 아래 자바스크립트 코드를 복사하여 

<!-- 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> 태그를 찾고(Ctrl + F)  바로 위에 복사한 코드를 붙여 넣어준 후 저장해 주면 끝입니다. 

 

여기까지 완료하고 저장하면 인라인 코드를 기본모드에서도 `백틱`을 사용해서 적용할 수 있습니다!

코드 내용 자세히 살펴보기

붙여넣은 코드가 어떤 역할을 하는 코드인지 살펴보겠습니다. 

let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)");

• 특정한 div 요소 안에 있는 모든 하위 요소를 선택합니다. (document.querySelectorAll)
• 이때 선택되는 div는 클래스가 tt_article_useless_p_margin.contents_style인 것입니다. 
  • tt_article_useless_p_margin.contents_style는 글이 올라오는 에디터 div의 class명입니다.

  • 

    크롬 관리자 모드로 확인한 클래스명

• 그러나 figure나 pre와 같은 특정한 요소는 제외됩니다.

textNodes.forEach(function(node) { ... })

• forEach라는 메서드를 사용하여 선택된 모든 하위 요소를 반복합니다.

 

node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');

• 여기서부터가 중요할 것 같은데 먼저 replace(A, B)는 A를 B로 바꾸는 함수입니다.

 

/`(.+?)`/g

•  / /는 정규표현식의 시작과 끝을 나타내며.
• g는 전역(global)의 의미로 문 문자열 내에서 모든 해당 패턴을 찾아 치환합니다.

 

`(.+?)`

• `는 문자 백틱을 의미
• 괄호 안에는.+? 는 1개 이상의 모든 텍스트를 나타내는 정규 표현식입니다.
  • 1개 이상은 ``은 인라인 코드가 적용이 안되고(0개)
  • ` `은 적용이 되는 것으로 확인할 수 있습니다(공백 1개)
  • ``도 적용되게 하고 싶으면.+? 대신.*?로 바꾸시면 됩니다.
• 괄호()를 사용하면 괄호 안에 문자를 치환할 때 변수($1)로 받을 수 있습니다. 

 결국 백틱으로 감싸인 문자열을 찾아서 이를 <code> 태그로 감싸서 대체하는 것을 의미합니다

확인해 보기

• 글쓰기 기본모드

 

• 미리 보기 및 저장한 글에서 보이는 화면

 

 

이제 인라인 코드를 쉽게 사용할 수 있지만 노션에 비하면 너무 밋밋한 합니다.

다음 글에서는 티스토리의 인라인 코트 스타일을 노션처럼 바꿔보겠습니다.