hELLO 스킨 4.10버전 백틱 인라인 코드 설정

hELLO스킨은 4.10버전 기준으로 화면 구조가 변경되어서, `document.querySelectorAll()` 코드를 다음과 같이 변경해야한다.

HTML편집 화면 </body> 앞에 삽입

<script> 
  window.onload = function() { 
  let textNodes = document.querySelectorAll("div.contents_style > *:not(figure):not(pre):not(div)");
  textNodes.forEach(node => {
    node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, `<code class='notion-code'>$1</code>`);
  });
}
</script>

 

CSS편집 화면 코드 추가

.notion-code {
    font-family: Consolas !important;
    line-height: normal !important;
    background: rgba(135,131,120,0.15) !important;
    color: #EB5757 !important;
    border-radius: 3px !important;
    font-size: 85% !important;
    padding: 0.2em 0.4em !important;
    margin-right: 0.2em !important;
    display: inline-block !important;
}

 

 

백틱을 이용한 인라인 코드블록 관련 내용은 아래 블로그들을 참고하면 된다.

[티스토리]10초만에 가능한 인라인 코드블록 편하게 적용하는 방법

 

티스토리에 백틱으로 인라인 코드 블럭 만들기