| #관련 글 |
| [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 |
| [TISTORY/Code Block] 티스토리 코드블럭 라인넘버(line number) 설정 |
| [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 |
#라인넘버(Line Number)
코드 블럭에 하이라이트를 설정하면 데모 사이트에서 본 디자인과 다를 수 있습니다.
티스토리의 css코드에 기본적으로 설정 된 코드들이 있어서 그렇습니다.
마음에 드는 디자인과 가독성을 높이기 위해 몇 가지 수정을 할 건데, 첫 번째로 라인넘버를 설정하겠습니다.
github.com/wcoder/highlightjs-line-numbers.js
wcoder/highlightjs-line-numbers.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
라인넘버는 github 페이지에서 js파일을 다운로드 하거나 cdn코드로 라이브러리를 가져와서 설정할 수 있습니다.
# 방법 1 - js 다운로드
아래의 경로를 통해 '다른 이름으로 링크 저장' 으로 다운로드 합니다.
블로그 관리 페이지 → [스킨 편집] → [파일업로드] 탭으로 이동해서 다운받은 js파일을 추가합니다.
[HTML] 탭으로 이동해서 <head></head> 태그 사이에 플러그인 초기화 코드를 삽입합니다.
<script>hljs.initLineNumbersOnLoad();</script># 방법 2 - 라이브러리
블로그 관리 페이지 → [스킨 편집] → [HTML] 탭으로 이동합니다.
<head></head>태그 사이에 github 페이지에서 복사한 cdn코드와 플러그인 초기화 코드를 추가합니다.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
여기까지 하시면 코드 블럭에 라인 넘버가 추가됩니다. 그런데 UI를 확인하면 아래와 같이 나타나는 경우가 있습니다.
이유는 티스토리의 기존 css코드에서 table에 기본으로 설정된 코드가 있기 때문입니다.
# table 설정 변경
블로그 관리 페이지 → [스킨 편집] → [CSS] 탭으로 이동합니다.
.entry-content와 table 사이에 > 를 넣어서 .entry-content 요소의 자식 테이블인 경우에만 아래 속성이 적용되도록 합니다.
.entry-content > table {
width: 100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 1em;
line-height: 1.5714;
color: #666;
}
.entry-content > table thead th {
padding: 7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody tr {
padding: 7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
padding: 7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
이 외에도 [CSS] 탭에서 여백, 글자색 등 원하는 설정을 커스텀 할 수 있습니다.
'일상 > 블로그' 카테고리의 다른 글
| [TISTORY] 티스토리 글꼴(폰트/Font) 변경 (1) | 2021.01.30 |
|---|---|
| [TISTORY/Code Block] 티스토리 코드블럭 스크롤(Scroll) 설정 (0) | 2021.01.27 |
| [TISTORY/Code Block] 티스토리 코드블럭 하이라이트(highlight.js) 테마 설정 (1) | 2021.01.23 |
| [TISTORY] 티스토리 글 URL 설정 (0) | 2021.01.22 |
