(Updated: 2014-01-13)
1. 문제점
티스토리 에디터는 인라인 코드를 삽입하는 기능이 없어, html 모드에서 <code> 태그를 일일이 덧씌워 적용해야 함.
2. 백틱을 사용하여 인라인 코드 작성
이러한 문제점을 해결하는 방법으로 <code>태그를 일일이 입력하는 것이 아닌 백틱(`)을 사용하여 인라인 코드를 작성할 수 있다 [1]. 원리는 백틱을 Java script를 사용하여 <code> 태그로 치환을 하는 것이다.
2. 1. 코드 삽입
우선, 설명하기 앞서, 내가 참조한 웹페이지에서 작성한 코드를 먼저 살펴보도록 하겠다.
<!-- 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 -->(1) querySelectorAll을 이용하여, <div class="tt_article_useless_p_margin contents_style"> 태그 내부의 내용 중, figure와 pre를 제외한 모든 내용을 추출
(2) 그 이후, Javascript의 replace 명령어를 사용하여, 백틱이 사용된 부분을 <code></code> 태그로 대체함.
2. 2. 문제점 1
현재 내가 사용하고 있는 티스토리의 스킨은 "북클럽 스킨"이다. 따라서, tt_article_useless_p_margin 클래스를 찾을 수 없다.
Fig.1과 Fig.2를 보면, 내가 사용하는 북클럽 스킨에서 클래스가 contents_style로만 정의가 되어있는 것을 확인할 수 있다. 따라서, 아래와 같이 위의 코드를 수정하도록 하자.
<!-- Inline code block Script -->
<script>
let textNodes = document.querySelectorAll("div.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 -->위 부분을 티스토리의 HTML의 <body> 태그 내부에 복사하면, 백틱이 감싸고 있는 부분이 인라인 코드가 됨을 확인할 수 있다.
3. 인라인 코드 CSS
인라인 코드의 CSS는 티스토리 내의 CSS 탭에서, 다음 항목들을 자신이 원하는 스타일로 수정해야 한다; 만약 자신이 사용하고 있는 티스토리 블로그의 스킨이 티스토리 내의 CSS 탭에서 아래와 같은 코드를 첨부하자.
.entry-content p code{
padding: 2px 5px;
border-radius: 3px;
background: #4a4a4a;
color: #ffffff;
margin: 0 2px;
border: 1px solid #000000;
}NOTE 1: 만약 자신이 사용하고 있는 티스토리의 스킨이 반응형 #2라면, `entry-content`가 아닌 `area_view`를 사용해야 한다.
[1] https://eomiso.tistory.com/entry/Tips-implement-inline-code-block-to-your-blog
[2] GitHub Flavored Markdown Spec
'티스토리 및 워드프레스 > 티스토리' 카테고리의 다른 글
| [티스토리] 블로그 상단 글 제목 이미지 삭제 및 크기 줄이기 (0) | 2024.01.29 |
|---|---|
| [티스토리] 구글 - 페이지 색인 생성, 발견됨 - 현재 색인이 생성되지 않음 (0) | 2024.01.25 |
| [티스토리] 구글 - 적절한 표준 태그가 포함된 대체 페이지 (0) | 2023.12.26 |
| [티스토리] 포스팅 목차 자동으로 생성 (ToC) 및 꾸미기 (0) | 2023.12.24 |
| [티스토리] 소제목 꾸미기 및 서식 (0) | 2023.12.24 |
댓글