[Tistory] 티스토리 코드블럭 스타일 변경하기 - highlight.js

티스토리 블로그 코드블록 스타일을 변경하는 방법에는 2가지가 있습니다.

1. 플러그인 적용하기

저는 플러그인을 적용해서 사용해 왔는데요, 여전히 코드블록이 마음에 들지 않아서 직접 수정해 보기로 했습니다.

 

2. 스킨 편집 메뉴에서 html, css 수정하기

먼저 html > head 태그 안에 아래 코드를 추가해주세요. {스타일_제목}이라고 되어 있는 부분에 스타일 제목을 넣어주면 됩니다. 참고로 저는 base16/chalk 테마를 선택했습니다. 

스타일 입력 시, 대문자는 소문자로, 띄어쓰기는 - 로 바꾸어서 입력하면 됩니다. 예시) Atom One Dark -> atom-one-dark

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/{스타일_제목}.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

 

highlight.js 웹에서 사용법(Usage) 확인 가능합니다. (링크: https://highlightjs.org/usage/)

How to use highlight.js

 

원하는 스타일을 데모 페이지에서 확인해볼 수도 있습니다. (데모 페이지: https://highlightjs.org/static/demo/)

highlight.js demo

 

그리고 코드블럭 폰트는 css에서 아래 코드를 추가해 줍니다. 우선 웹 폰트를 import 해줍니다.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap');

저는 구글 웹 폰트인 Fira Code 폰트를 사용하였습니다.

https://fonts.google.com/?query=ibm 

Google Fonts

 

그 다음 아래 코드를 추가해 주어 폰트 종류, 폰트 크기, 테두리도 둥글게 만들어주면 제가 원하는 스타일의 코드블럭이 완성됩니다.

.hljs {
	font-family: 'Fira Code';
	max-width: 1000px;
	max-height: 800px;
	overflow: auto;
	font-size: 10pt;
	border-radius: 1rem;
}

 

만약 여기까지 따라했는데 스타일이 변경되지 않았다면, 티스토리 플러그인 적용이 해제되어 있는지 확인해 보세요. 저는 플러그인 해제하고 나니 잘 적용되었습니다.