1. 코드블럭 테마 변경
Get version 클릭
jsdelivr 내용 모두 복사하기
스킨 편집 html 에서 <head></head> 안쪽에 위에서 복사한 코드 넣어주기
이때 styles/ 뒤의 default를 원하는 테마로 변경
테마는 https://highlightjs.org/static/demo/ 에서 확인하기
내가 적용한 테마 :
테마 이름은 소문자, -로 연결
<!-- change_clo 코드블럭 하이라이트 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/atom-one-dark-reasonable.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2. 라인 넘버
아래 코드를 html 코드블럭 테마 적용 코드 밑에 삽입
<!-- change_clo Line Number 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
css 에서 맨 아래에 다음 코드 삽입
/* Line Number CSS */
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #B5B5B5;
border-right: 1px solid #B5B5B5;
vertical-align: top;
width: 20px;
padding-left: 0px;
}
/* your custom style here */
.hljs-ln td.hljs-ln-code {
padding-left: 15px;
}
css에서 ctrl + f 로 table 검색
content 와 table 사이에 > 추가
.entry-content > table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.9375em;
line-height: 1.5714;
color: #666;
}
.entry-content > table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
적용하기 클릭 후 확인해보기
참고 :
https://highlightjs.org/static/demo/
https://one-hour.tistory.com/33
'tistory' 카테고리의 다른 글
| [티스토리 코드블럭] 코드블럭 언어명 표시, 열기 닫기 버튼 (0) | 2022.09.06 |
|---|---|
| [Tistory] 티스토리 글 content 안의 이미지에 테두리 넣기 (0) | 2022.08.25 |
| [티스토리 스킨] 본문 기본 글자 색 설정 변경하기 (0) | 2022.07.18 |
| [티스토리 스킨] Book Club 스킨 header 색, 블로그 이름 색, 검색창 색 변경하기 (2) | 2021.11.03 |
| [티스토리 스킨] Portfolio 스킨 리스트 사진 삭제하기 (0) | 2021.10.27 |
댓글