티스토리 코드블럭 없이 코드 인라인 블럭 작성하기(코린이용)

인라인 코드

나는 티스토리 기본 #1 스킨을 수정해서 쓰는 중인데 노션과 달리 ctrl+e 기능이 없어 아쉬웠다. 아무래도 코드를 작성하는 중 코드블럭 없이 설명할 때는 인라인 코드 표시가 가독성에 도움이 되기 때문이다. `print()` 이처럼 말이다

때문에 여러 티스토리 블로그를 보면서 " ` " 기호 이름이 '백틱' 이라는 것을 알게되었고 생각해보면 마크다운에서 코드를 작성할 때에도 이 백틱을 썼었다. 그리고 이 백틱 기호 사이에 코드를 써서 인라인 블럭을 만들도록 html을 수정하는 분이 많았다.

대부분 다음과 같은 코드를 포스팅 해놓았다.(다 비슷한거보면 하나를 베낀건가..?)

let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)");
    textNodes.forEach(function(a) {
        a.innerHTML = a.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
    });

출처: https://mu08.tistory.com/112 [그냥, 일단 써내려가자:티스토리]

<script>
window.onload = () => {
    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='notion-code'>$1</code>`);
    });
    }
</script>

출처: https://dev-qhyun.tistory.com/12

---

그럼에도 적용되지 않음

하지만 내 블로그에는 html을 수정해도 바뀌지 않았고,,, 그냥 새로운 코드를 작성했다.

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.body.innerHTML = document.body.innerHTML.replace(/`(.*?)`/g, "<code>$1</code>");
});
</script>

 

HTML 의 </body> 윗부분에 해당 코드를 붙여넣었더니 작동했다.

CSS

CSS는 본인의 입맛에 맞게 수정해야할듯하다.

 

나는 이렇게 붙여넣었는데 원하는대로 수정하는 게 좋을 것 같다~

/*in-line 코드 서식 수정*/
code {
  font-family: Consolas ;
  line-height: normal ;
  background: rgba(135,131,120,0.15) ;
  color: #EB5757 ;
  border-radius: 3px ;
  font-size: 85% ;
  padding: 0.2em 0.2em !important;
  margin-right: 0.2em !important ;
  display: inline-block ;
}
/*in-line 코드 서식 수정*/

---

또 오류

이렇게 적용했더니 toc에서 문제를 일으켰다. 
내 블로그에 예전에 게시글 내 목차를 볼 수 있도록 띄웠는데 이 부분이 제대로 동작하지 않았다. 
클릭을 해도 해당 부분으로 이동하지 않았고 현재 위치가 어느 부분인지 목차에서 제대로 표시되지도 않았다.
(글 첫부분을 읽고 있음에도 항상 끝쪽으로 표시가 되었다.)

또한 글 수정 버튼이 클릭이 되지 않아 불편함이 있었다.

원인은 `document.body.innerHTML`을 직접 수정하기 때문이라고 하는데 이 코드가 실행되면 페이지의 모든 html을 문자열로 바꾸고 적용한다고 한다. 때문에 기존 동작이 없어질 가능성이 높다고 한다.
물론 나는 무슨 말인지 모르겠다..

그래서 다음과 같은 약간 복잡한 코드로 최종적으로 수정했다!

  <!-- Inline code block Script -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll("p, span, li, div").forEach(function(el) {
            el.childNodes.forEach(function(node) {
                if (node.nodeType === Node.TEXT_NODE) {
                    let replacedText = node.nodeValue.replace(/`(.*?)`/g, "<code>$1</code>");
                    if (replacedText !== node.nodeValue) {
                        let newSpan = document.createElement("span");
                        newSpan.innerHTML = replacedText;
                        el.replaceChild(newSpan, node);
                    }
                }
            });
        });
    });
  </script>
  <!-- end of Inline code block Script -->