JB FACTORY 티스토리 스킨에서 백틱 인라인코드 설정하기
- 각종정보
- 2026. 1. 19.
이번에 인터넷에서 이런저런 자료들을 좀 찾아보다가 티스토리 블로그에서 노션처럼 텍스트에 인라인코드를 설정한 본문을 보게되었다. 어떻게 이렇게 예쁘게 만들었을까?
티스토리 본문에서 위처럼 백틱 인라인코드를 쓰게되면 매우 간편하게 노션같은 본문을 만들 수 있다. CSS로 색상값이나 이런건 다 바꿀 수 있기 때문에 중요한건 티스토리 본문에 있는 `백틱`을 어떻게 자동으로 저런 코드로 바꿔주는지 알아야한다.
예전처럼 텍스트 입력 화면을 HTML로 바꾸거나 마크다운에서 글쓰기 후 HTML로 붙여넣는 스타일은 뭔가 아무리봐도 아닌 것 같았다. <code> 같은 태그로 감써서 쓰는 경우에도, 이게 매우 귀찮기 때문에 사실상 잘 안쓰게 될터인데...
인터넷에 검색을 해보니가 2023년부터 티스토리 블로그에 인라인코드 백틱을 적용한 후기 및 코드를 알려주는 후기 글들이 몇 개 정도 있었다. 그래서 전체적으로 다 읽어보고 대충 내용을 이해한 다음 블로그들에서 제공하는 코드들을 그대로 따라 붙여넣기 해보거나해서 테스트를 해보았는데 아무리해도 내 블로그에는 적용이 안되었다.
뭐가 문제지? 위 구글 검색화면에서는 티스토리에 있는 `hELLO 블로그 스킨`에 대한 내용이 많이 나왔는데 아마도 유명한 티스토리 블로그 스킨인가보다. 좀 찾아보니까 기본으로 다크모드 배경을 갖고 있는 티스토리 스킨인 듯 하다. 나는 지금 JB FACTORY의 스킨을 오래도록 사용 중이며 크게 무리없이 사용 중이므로 스킨을 바꾸고싶진 않았다. 오래걸리기도 하고...
JB FACTORY 블로그 스킨이라서 기존 블로그 스킨이랑 조금 달라서 코드가 안맞았던걸까? 그래서 해결하는데 끙끙 거리다가 AI를 통해 코드를 짜서 해결하게 되었다.ㅋㅋㅋ
기존에 검색 결과로 나온 코드들이 내 블로그에 적용이 안되었던 이유는 아마도 본문 영역을 불러오는 이름이 정확하게 그 코드와 맞지 않았기 때문으로 보인다. 즉 스킨마다 본문 영역을 설정한 이름이 다르기 때문에 코드를 그대로 복사해서 붙여넣으니까 안되었던 모양이다. 이 부분을 AI로 검토 후 찾아내서 수정해주는 방식으로 해결하였다.
HTML에는 백틱 변환 스크립트가 필요하고 CSS에는 CSS 코드가 필요하다.
위 코드는 티스토리 스킨 HTML 코드다. 이 내용을 `</head>` 바로 위에 추가해준다. 여기에서 본문 영역을 지정하는 `.jb-article` 부분이 기존 코드와 달라서 아마 기존에 코드들은 작동하지 않았던 것 같다.
CSS를 추가하고 CSS의 모양을 `노션`처럼 만들어주기 위한 CSS 코드다. 이걸 CSS 제일 아래쪽에 붙여넣기 해주면된다.
이렇게해서 테스트해보면 끝. 원래대로라면 문제 해결을 위해 하루종일 끙끙 거렸어야했을지도 모르는데 AI로 문제점 찾으니 진짜 후딱이네....