[Tistory] 코드 블럭 커스텀하기

코드 블럭 테마

✅ 테마 이름 확인 : https://highlightjs.org/static/demo/

✅ 테마 적용

<!--============= 코드 블럭 테마 =============-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

테마를 적용하기 위해 html 파일의 부분에 위 코드를 작성해준다.

이 때, 테마 이름에 띄어쓰기가 있으면 띄어쓰기 부분을 -(대쉬)로, 대문자를 모두 소문자로 변경해서 넣어줘야 한다.

ex) Github Dart → github-dark

 

코드 블럭 배경

✅ css 변경

.permalink>.content .contents_style>pre code {
    /* 코드블럭 - 배경 */
    background-color: #282C34 !important;
    ...
}

• ctrl + F (찾기) : pre code
• <dark/light 모드일 때 코드 블록 배경색 고정 ➡ !important

 

코드 블럭 넘버

✅ 파일 업로드 하기

highlightjs-line-numbers.min.js

0.00MB

• https://github.com/wcoder/highlightjs-line-numbers.js
• ctrl + s 저장
• 티스토리 테마에 업로드 하기

✅ 적용

<!--============= 코드 블럭 넘버 =============-->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

html 파일의 </head> 이전 부분에 위 코드를 작성해준다.

✅ 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: #ccc;
	border-right: 1px solid #ccc;
	vertical-align: top;
	padding: 0 10px 0 0 !important;
}
.hljs-ln-code {
	padding-left: 10px !important;
}

 

---

Refernece

https://habitus92.tistory.com/9