티스토리에서 백틱(`)으로 인라인 코드 블록 표시하기

블로그를 작성할 때 코드 스니펫을 공유하는 일이 빈번하다. 특히 인라인 코드 블록은 문장 중간에 코드를 강조하기 위해 사용되는데, Notion 등 사용이 익숙하면 백틱(`)으로 간단하게 인라인 코드를 표시할 수 있다. 그렇다면 티스토리(Tistory)나 다른 블로그 플랫폼에서도 동일하게 구현할 수 있을까? 이번 포스트에서는 백틱을 사용하여 인라인 코드 블록을 쉽게 표시하는 방법을 소개해 본다.

Notion에서의 인라인 코드 블록

1. 문제 상황

티스토리에서는 기본적으로 백틱을 사용하여 인라인 코드를 표시하는 기능을 제공하지 않는다. 따라서 블로그 포스트 작성 시 `이와 같은` 인라인 코드 강조를 위해 매번 태그를 직접 입력해야 하는 불편함이 있다.

2. 해결 방법

백틱을 사용하여 인라인 코드를 쉽게 표시하기 위해 JavaScript를 활용할 수 있다. 백틱으로 감싸진 텍스트를 자동으로 태그로 변환하는 스크립트를 작성해 보겠다.

코드:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 대상 요소 선택
  let rootElement = document.querySelector("div.contents_style");

  // 재귀적으로 텍스트 노드 처리 함수
  function replaceBackticks(node) {
    node.childNodes.forEach(function(child) {
      if (child.nodeType === Node.TEXT_NODE) {
        // 백틱으로 감싼 부분 치환
        let replacedText = child.textContent.replace(/`([^`]+?)`/g, '<code>$1</code>');
        if (replacedText !== child.textContent) {
          let newFragment = document.createElement('span');
          newFragment.innerHTML = replacedText;
          node.replaceChild(newFragment, child);
        }
      } else if (child.nodeType === Node.ELEMENT_NODE && !['FIGURE', 'PRE'].includes(child.tagName)) {
        // 재귀적으로 하위 요소 탐색
        replaceBackticks(child);
      }
    });
  }

  // 처리 시작
  replaceBackticks(rootElement);
});
</script>

• 재귀 함수 `replaceBackticks`를 사용하여 모든 자식 노드를 탐색한다.
• 텍스트 노드를 찾으면 백틱으로 감싼 부분을 `code`태그로 치환한다.
• 요소 노드인 경우, `FIGURE`나 `PRE` 태그가 아니면 재귀적으로 하위 노드를 탐색한다.
• 이를 통해 헤더 태그 내부의 텍스트 노드까지 모두 처리할 수 있다.

3. CSS 스타일 적용

태그가 인라인 코드로서의 스타일을 갖추려면 CSS 스타일을 추가해야 한다.

예시:

code {
    font-family: "Fira Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace !important;
    line-height: normal;
        font-weight: normal;
    background: rgba(135,131,120,0.15);
    color: #EB5757;
    border-radius: 3px;
    font-size: 85% !important;
    padding: 0.2em 0.4em;
    margin-right: 0.2em;
}

이번 포스트에서는 티스토리 등 블로그에서 백틱(`)을 사용하여 인라인 코드 블록을 쉽게 표시하는 방법을 알아보았다. JavaScript를 활용하여 텍스트를 변환하고, CSS를 통해 시각적으로 개선할 수 있다. 이를 통해 개발 관련 포스트 작성 시 생산성을 높이고, 가독성을 향상시킬 수 있다.

예시 결과

• 적용 전:
  함수 console.log()은...
• 적용 후:
  함수 `console.log()`은...

위와 같이 게시물의 가독성이 확연히 증가함을 확인할 수 있다.