안타깝게도 노션이나 벨로그와는 달리 티스토리에는 백틱으로 인라인 코드를 입력할 수 있는 방법이 없다.
그렇지만 모든 코드를 코드 블럭으로만 처리할 수 없어서 HTML/CSS 코드를 추가해서 백틱으로 인라인 코드 입력이 가능하도록 했다.
관련하여 검색해보면 다양한 블로그 글과 코드를 볼 수 있는데, 그냥 그대로 복붙해서 적용하니 내 블로그 스킨에서는 잘 적용되지 않아서 약간 손봤다.
복잡한 이야기들은 모두 생략하고 결괒거으로 내가 적용한 코드는 아래와 같다~!
참고로 나는 Book Club 이라는 스킨을 사용하고 있다!
코드 적용 방법
(우측 상단) 프로필 이미지 선택 > 관리 > (좌측 패널) 꾸미기 > 스킨 편집 선택 > (우측) html 편집 선택
백틱 인라인 적용 코드
HTML 코드
어디에 넣든 상관없지만 <body> 블록 제일 밑, </body> 바로 앞에 넣는 걸 추천한다!
중간 어딘가에 넣어두면 나중에 내가 추가한 코드들을 찾기 너무 어렵기 때문...
<!-- Inline code block Script -->
<script>
// 페이지 로드 후 실행
document.addEventListener("DOMContentLoaded", function () {
// 변환 대상 요소 탐색
let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)");
textNodes.forEach(node => {
// 백틱(`)을 포함한 텍스트를 <code> 태그로 변환
node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
});
});
</script>
<!-- end of Inline code block Script -->
CSS 코드
CSS 코드 역시 마찬가지로 CSS 탭의 가장 밑에 붙여넣으면 된다.
/* Inline code block Style */
.tt_article_useless_p_margin.contents_style code {
font-family: Menlo, Consolas, Monaco, monospace;
font-size: 85%;
padding: 2px 5px;
border-radius: 3px;
background: #efefef;
margin: 0 2px;
border: 1px solid #e0e0e0;
}
편집하고 나면 이렇게 `백틱으로 인라인 코드 작성`이 가능해진다!
인라인 코드의 폰트 크기나 색상은 원하는대로 조절하여 사용하길!
[참고한 블로그 글]
[Tips] implement `` inline code block to your blog - (티스토리 인라인 코드 블럭 사용하기)
Have a peek at the github flavored markdown examples (link) . So if you want to use inline block in your blog post, you need to convert a pair of ` (accent grave or backtip) to (explanatiions on the tag is here. the picture on the left is change to `inline
eomiso.tistory.com
티스토리에서 백틱(``)으로 인라인 코드 편하게 입력하기 (반응형 #2 스킨)
너무 불편하게도 티스토리는 에디터 자체에 인라인 코드를 삽입하는 기능이 없어 html 모드에서 를 일일이 덧씌워 적용해야했다. (마크다운 모드는 나한테 글자가 너무 작아서 불편했다.) 오늘도
haruisshort.tistory.com