공부 기록/트러블슈팅

[팁] 티스토리에서 백틱(`)으로 인라인 코드 만들 때 생기는 공백 해결법

lelezhong 2025. 4. 21. 18:11

📌 문제 상황

나도 개발블로그 써야지! 하고 만든 티스토리...

기본모드에서 백틱(`)을 사용해서 인라인 코드 블럭을 만들 수 있도록 하는 블로그 글을 보았다.

 

그런데...

 

으잉?

 

엥??

이것 뭐예요?

공백이나 쉼표 뒤에 이상한 회색 공백이 생기는 문제가 발생했다

 

지피티에게 도움을 구했지만 쓸모가 없었다...

결국 F12로 html 코드를 뜯어보고서야 해결할 수 있었다!

역시 지피티 활용도 질문을 잘 해야 하는군 ㅋ

🔎 원인 분석

  1. 티스토리 에디터 자동 마크업
    • <span style="color: #333">, <span><code></code></span> 같은 태그가 자동 삽입됨
  2. 공백이 포함된 백틱 치환 → 회색 배경 깨짐
  3. 빈 <code> 태그도 회색 박스를 만들어버림

✅ 해결 방법

1. 백틱을 <code> 태그로 치환하는 JS 코드 추가

node.innerHTML = node.innerHTML.replace(/`([^`]*?)`([.,!?;]?)/g, (match, content, punctuation) => {
  if (content.trim() === '') return '';
  return `<code class="notion-code">${content.trim()}</code>${punctuation}`;
});
 

2. 빈 <code> 태그 제거

document.querySelectorAll("code.notion-code").forEach(code => {
  if (code.textContent.trim() === '') {
    code.remove();
  }
});

💬 후기 및 전체 코드

<script>
  window.onload = function () {
    // ✅ 1. 백틱 → <code> 태그 변환
    const textNodes = document.querySelectorAll(
      "div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre):not(div):not(:has(a))"
    );
    textNodes.forEach((node) => {
      node.innerHTML = node.innerHTML.replace(
        /`([^`]*?)`([.,!?;]?)/g,
        (match, content, punctuation) => {
          if (content.trim() === '') return ''; // ✅ 비어있는 백틱 제거
          return `<code class="notion-code">${content.trim()}</code>${punctuation}`;
        }
      );
    });

    // ✅ 2. 빈 <code> 태그 완전 제거 (혹시 남은 것 있을 경우 대비)
    document.querySelectorAll("code.notion-code").forEach(code => {
      if (code.textContent.trim() === '') {
        code.remove();
      }
    });
  };
</script>

 

와 진짜 너무너무 힘들었어요....

저 같은 현상을 겪으신 분들께 도움이 되길 바랍니다!

📚 참고 링크