2024.02.02 - [블로그] - [블로그] 티스토리 블로그 백틱(``)으로 인라인 코드 입력하기
[블로그] 티스토리 블로그 백틱(``)으로 인라인 코드 입력하기
++ 2024.02.24 티스토리 블로그 테마를 정상우 개발자님의 hELLO 테마로 변경함에 따라 아래 내용은 지금 보이는 글과 다를 수 있습니다. 평소에 마크다운으로 글을 작성하던 것이 편했던 나에게 티
memoirlog.tistory.com
hELLO 스킨을 적용하기 전에 적용했던 방법이 적용되지 않아서 검색 후 적용해 보았다.
1. 기존의 방법이 적용되지 않았던 이유
기존의 방법은 `<body>`태그 하단에 코드를 추가하여 적용되도록 하는 방식이었다.
이 방법이 안 되는 이유는 (정확히는 잘 모르지만) `hELLO 스킨에서 이미지 지연 로딩 기능의 추가로 인해 본문 렌더링 방식을 바꿨기 때문에 발생한 문제`인 것 같다.
쉽게 말하면 본문 렌더링 방식이 바뀌어서 해당 코드를 실행하지 않는다고 생각하면 될 것 같다.
그래서 `window.onload`를 사용하여 적용될 수 있도록 한다.
2. 적용 방법
적용 방법은 간단하다.
`블로그 설정 > 꾸미기 > 스킨 편집 > html 편집`으로 들어가서 마찬가지로 html에 `</body>` 태그 아래의 해당 코드를 추가해 주면 된다.
<!-- 백틱 inline code -->
<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>
+++ 2024.02.29
위와 같이 적용시 접은글의 `더보기`가 안눌리는 현상이 있어 일단은 아래의 코드로 적용
-> 이렇게 적용하면 접은글 안에는 백틱으로 인라인코드 적용되지 않음
<script>
window.onload = function() {
// 백틱 inline code
// 접은글 div 임시방편 -> 접은글 안에는 백틱 적용 안되고 있음
let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre):not(div)");
textNodes.forEach(node => {
node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, `<code class='notion-code'>$1</code>`);
});
}
</script>
+++ 2025.03.04
a태그(링크)에 있는 백틱 부분도 인식하여 변경하고 있어, a태그 부분을 인식하지 않도록 아래의 코드로 적용
<script>
window.onload = function() {
// 백틱 inline code
// 접은글 div 임시방편 -> 접은글 안에는 백틱 적용 안되고 있음
let 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, `<code class='notion-code'>$1</code>`);
});
}
</script>노션 스타일 적용
이렇게만 적용하면 밋밋한 인라인 코드가 되어버리기 때문에 나는 `notion style`의 코드를 적용했다.
2025.03.04
hELLO v4.10.3 으로 변경하고 나서는 아래 내용은 적용하지 않았음
방법은 간단하다.
마찬가지로 `블로그 설정 > 꾸미기 > 스킨 편집 > html 편집`으로 들어가서 CSS에 아래의 코드를 추가해 주면 된다.
/* inline code block notion style */
.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;
}
그러면 다음과 같이 적용된다!
`이렇게`
참고자료
티스토리에 백틱으로 인라인 코드 블럭 만들기
들어가며 `Velog`에서 작성했던 글들을 `Tistory`로 이전하면서 `Tistory`에서도 인라인 코드 블럭을 적용할 수 있다는 사실을 이번에 처음 알게 되었다. 하지만 알아보니 굉장히 번거로운 과정을 거쳤
dev-qhyun.tistory.com
코드블록에 Line Number를 추가하려면 어떻게 해야 하는지요? · tidory hello · Discussion #179
덕분에 그동안 블로그를 이쁘게 잘 꾸며서 써왔습니다. 최근에 블로그에서 ver 4.x 를 보고 다시 적용해 보았더니 기존 CSS와 hljs 태그 부분이 변경/업데이트 된 것 같습니다. 기존 ver3.x에서는 Code b
github.com
'블로그' 카테고리의 다른 글
| [블로그] 코드 블럭에 copy 버튼 추가 (hELLO 스킨) (4) | 2024.02.27 |
|---|---|
| [블로그] 티스토리 hELLO 스킨 적용 (글쓰기 버튼, 코드블럭 꾸미기, 이미지 팝업 문제) (0) | 2024.02.25 |
| [블로그] 코드블럭 copy 버튼 추가 (2) | 2024.02.05 |
| [블로그] 티스토리 블로그 특정 부분만 드래그 허용 (0) | 2024.02.03 |
| [블로그] 티스토리 블로그 백틱(``)으로 인라인 코드 입력하기 (0) | 2024.02.02 |