티스토리 – 백틱을 이용한 인라인 코드 블록 적용(북클럽 스킨)

다른 블로그들을 보면 “저건 어떻게 하는 걸까?”라는 의문이 남던 `티스토리`←이 느낌. 백틱(backtick)을 이용한 인라인 코드 블록(inline code block)을 적용한 사실을 알았습니다. HTML/CSS 등 코딩?을 공부한 적이 없기에 모든 정보는 검색을 통해서 배워야만 했습니다. 아무리 똑같이 해도 전혀 적용이 되지 않았는데 문제는 티스토리 북클럽 스킨 기본 HTML과 내 블로그(북클럽 스킨) HTML에 차이가 생긴 문제였습니다. 그동안은 소스들을 추가만 했을 뿐인데 왜 차이가 생긴 것인지는 의문입니다. (쓰는 단어나 의미가 틀리거나 다르더라도 이해해 주시기 바랍니다.)

 

 

 

백틱 & 인라인 코드 블록

• 백틱은 일반 키보드 [~] 표시와 함께 있는 [`] 이것을 말한다. 엔터키 옆에 있는 [‘] 따옴표와 비슷하지만 쓰임새는 다릅니다. 백틱을 이용하면 강조할 단어마다 HTML에서 <code>...</code>코드를 일일이 적어주지 않아도 인라인 코드 블록 느낌을 낼 수 있습니다.

• 인라인 코드 블록은 특정 단어를 감싸고 있는 느낌으로 글의 가독성을 좋게 하는데 쓰이기도 합니다. 일반 글자 배경색과는 다른 느낌입니다.

 

인라인 코드 블록 적용하기

Step 1 : HTML에 소스 추가

• 티스토리 관리자 → 스킨편집 → HTML 편집 → HTML

• 아래의 소스를 '</body>' 위에 추가

<!--인라인 코드 추가 시작 -->
<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>
<!--인라인 코드 추가 끝 -->

 

 

 

Step 2 : CSS에 소스 추가

• 티스토리 관리자 → 스킨편집 → HTML 편집 → CSS

• 아래의 소스를 CSS 에 추가

.entry-content p code {
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--chip-color);
    margin: 0 2px;
    border: 1px solid var(--line-color);
}

 

 

인라인 코드 블록 소스 텍스트

티스토리_북클럽_인라인_코드블록_소스.txt

0.00MB

 

 

※ 인라인 코드 블록은 게시물 내에서는 보이지만 글 목록 글 미리보기에서는 적용이 안된 상태로 보입니다. 그렇다고 해당 문구가 사라지거나 검색에 지장을 주지는 않습니다. 만일 위 소스들을 적용시킨 후 인라인 코드가 적용되지 않는다면 CSS에서 `entry-content p code` 부분이 두 개 인지 찾아보시기 바랍니다.

 

---

 

 

티스토리 - 이전 발행 글 넣기 박스 크기 줄이기

 

티스토리-공감 박스 크기 변경, 가운데 정렬 및 문구 추가

 

티스토리 블로그 배경 색상 바꾸는 방법, CSS 편집으로만 간단하게