블로그 글에서 짧은 코드, 명령어, 키 입력, 파일명 등을 눈에 띄게 보여주고 싶을 때 인라인 코드를 사용하게 됩니다.
티스토리에서 인라인 코드는 마크다운 모드에서 백틱(`)으로 감싸거나 HTML 모드 <code></code>로 감싸서 사용할 수 있습니다.
두 방법은 모드를 바꿔야 하는 불편함이 있고 모드 변경 과정에서 작성했던 글의 형식이 깨질수도 있습니다. 이번 글은 모드 변환 없이 기본 모드에서 백틱(`)을 활용해 인라인 코드를 적용하는 방법을 정리해 보았습니다.
인라인 코드 적용하기
블로그 관리 → 스킨 편집 → html 편집으로 이동합니다.
인라인 코드 블럭 사용을 위해 아래의 자바스크립트 코드를 복사합니다.
`replace(/cc/g, '<code>$1</code>'`를 통해 (백틱)'..'으로 감싸인 문자열을 찾아 `<code>` 태그로 감싸서 대체합니다.
<!-- Inline code block Script -->
<script>
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>$1</code>');
});
</script>
<!-- end of Inline code block Script -->
<body> 태그 마지막인 `</body>`를 찾은 뒤 바로 위에 자바스크립트 코드를 붙여넣고 적용합니다.
적용이 완료되면 인라인 코드를 기본모드에서도 `'(백틱)'`을 사용해서 적용할 수 있습니다.
여기까지만 해도 인라인 코드가 적용되지만 밋밋하기에 스타일을 노션 스타일로 적용하겠습니다.
CSS 스타일 적용하기
인라인 코드는 `<code>` 태그를 사용하기에 `code`에 대한 CSS 값을 설정합니다.
CSS 탭으로 이동해 `code` 태그를 찾아보면 다른 태그와 함께 적용되어 있습니다.
`code` 태그만 별도 스타일 적용을 위해 `code` 태그를 지우고 밑에다 새로 정의합니다.
아래 코드를 복사 & 붙여넣기하여 `code` 태그만 별도 스타일을 적용해줍니다.
code {
font-family: Consolas !important;
line-height: normal;
font-weight: bold;
background: rgba(135,131,120,0.15);
color: #e43030;
border-radius: 3px;
font-size: 85% !important;
padding: 0.2em 0.4em;
margin-right: 0.2em;
display: inline-block;
}
CSS 스타일까지 적용 함으로써 `인라인 코드`를 보다 더 깔끔하게 사용할 수 있습니다.
인라인 코드를 기본 모드에서도 손쉽게 적용할 수 있어, 굳이 마크다운이나 HTML 모드로 전환하지 않아도 편리하게 작성할 수 있습니다. 여기에 스타일까지 더해 가독성을 높이면, 블로그 글이 한층 더 깔끔하고 보기 좋아집니다.
'Web' 카테고리의 다른 글
| [Grafana] AWS CloudWatch, Grafana 연동하기 (0) | 2025.08.21 |
|---|---|
| [zsh] 유용한 플러그인 설치하기 (zsh-syntax-highlighting, zsh-autosuggestions) (3) | 2025.08.12 |
| [MacOS] 맥북 SSH 접속 셋팅하기 (+RSA Key) (0) | 2025.06.28 |
| [curl] HTTP,SSL 인증서 요청 확인하기 (1) | 2024.05.24 |
| WSL 윈도우 Ubuntu 비밀번호 분실 시 초기화 (1) | 2023.10.17 |
