티스토리 inline 코드블럭 사용하기 (html,css 수정 자동변환)

서론

티스토리 에디터의 코드부분 유틸성은 그렇게 좋지 못하다..😥(노션을 하다와서 역체감이..)

특히 기본모드에서 인라인코드블럭 (`이게 인라인코드블럭`) 을 지원하지 않는데, 기존에는 마크다운으로 작성하거나, HTML에 <code></code>를 직접 넣어줘야했다.

너무 번거로우니 백틱(`)을 <code>로 자동으로 변환하여 인라인코드블럭으로 사용 할 수 있도록 html,css를 수정해보자. 

일단 기존 에디터에서 수정하는 두가지 방법을 간단히 알아보자.

기존 에디터 수정방법

1. 마크다운 작성하기

기본모드 → 마크다운 모드로 수정하여 작성한다. 마크다운 모드에서는 백틱(`)만 감싸주면 인라인코드블럭을 사용 할 수있다. 다만, 마크다운 모드는 이미지 복사, 붙여넣기가 안되서 블로그 포스팅이 힘들다ㅠ

2. HTML 수정하기

html : <code>인라인코드블럭</code>

결과 : `인라인코드블럭`

<code> </code로 감싸주면 되는데, 여러 문자를 지정해야 될때 여간 번거로운게 아니다.

 

백틱(`) 자동변환(HTML, CSS 수정)

티스토리 관리자 - 꾸미기 - 스킨편집 - html 편집 에 들어가서 아래 내용을 적용한다.

1) HTML코드 수정

</body> 바로 위에 아래 스크립트를 넣어준다.

이 스크립트는 백틱(`)으로 감싸진 문자를 찾아 <code class="inline"> ~ </code> 로 변환해준다.

<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 class="inline">$1</code>');
    });
</script>
</body>

2) CSS 수정

<code class="inline"> ~ </code> 클래스에 적용 되도록 맨 아래 추가해주자.

code.inline {
    background-color: #f4f4f4; /* 회색 배경 */
    color: #ff1493; /* 붉은 핑크 글씨 */
    padding: 2px 4px;
    border-radius: 4px;
}

 

 

적용 결과

인라인 코드블록 `inline code block` 적용 결과. 백틱으로만 감싸도 된다! `오예`

 

 

참고자료

https://haruisshort.tistory.com/253

티스토리에서 백틱(``)으로 인라인 코드 편하게 입력하기 (반응형 #2 스킨)