Snow flake

[HTML/CSS] 티스토리 코드블럭 테마 커스터마이징 본문

Programming/HTML | CSS

[HTML/CSS] 티스토리 코드블럭 테마 커스터마이징

MAYSON 2022. 10. 10. 19:13

네이버 블로그 보다 티스토리에 개발자, 엔지니어 분들이 많은 것 같다.

텍스트로만 코드를 나열하기에는 가독성도 떨어지고, 변수나 메소드 구분이 어렵기 때문에 많은 이들이 코드블럭을 사용해 정리를 하곤 하는데(git 불러오기 제외!), 티스토리가 기본 제공하는 테마는 화이트로 되어있다.

 

나 역시 그렇지만 많은 사람들이 IDE 설정을 다크모드로 해놓고 사용하는 경우가 많기 때문에(뇌피셜... 주변은 대다수가 그러더라구요..?) 티스토리가 제공하는 코드블럭을 커스터마이징 해보자!

 

포스팅에 코드블럭 삽입 방법

highlight.js 적용하기 - (1)

가장 고전적인 방법이다. highlightjs 홈페이지에서 코드를 받아와 html 코드를 수정하면 된다!

https://highlightjs.org/

 

highlight.js

Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.

highlightjs.org

아래 코드를 해당 홈페이지에서 긁어오면 된다.

/* 긁어온 cnd */
<link rel="stylesheet"
	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

/* 적용이 되지 않을 때는 버전을 낮춰서 사용 */
<link rel="stylesheet" 
	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

설정 > 스킨 편집 > html 편집 으로 가서 <head></head> 내부에 긁어온 코드를 붙여넣기 해주면 코드블럭 하이라이트가 적용된다.

 

여기까지는 에디터 에서만 적용이 되고 실제 블로그에서 보이는 테마를 포함한 하이라이트 색상에 대한 디자인 목록은 아래에서 참고해 다시 수정해준다.

https://highlightjs.org/static/demo/

 

highlight.js demo

 

highlightjs.org

언어를 고르고 Styles 에서 테마를 선택하면 각각 코드블럭 디자인들이 나오게 되는데 선택을 했다면, 아까 붙여넣기한 코드를 수정해준다.

 

Atom On Dark 로 선택해서 해보자면

/* 수정 전 */
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

/* 수정 후 */
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-on-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

default.min.css 부분에서 default 를 테마 이름으로 바꿔주면 되는데

유의할 점은 대문자는 무조건 소문자로 작성하고, 띄어쓰기 부분은 - 로 대체해야 한다.

Atom On Dark > atom-on-dark

 

html 편집 에서 처음 복붙했던 부분을 수정 후 새로 넣어주면 적용 끝!

 

** cnd 방식이 아닌 파일을 직접 다운받아 업로드 하는 방식도 있다.

highlight.js 적용하기 - (2)

이렇게 보면 너무 귀찮은데, 최근에는 티스토리 플러그인을 이용해서 간단하게 하이라이트, 스타일 적용이 가능하다.

 

설정 > 플러그인 > Syntax Highlight 를 사용해 테마 선택 후, 변경사항 적용을 하면 정말 간단하게 적용이 가능하다.

 

하지만 highlight.js 코드를 직접 편집해 적용하는 것과 다르게 테마나 하이라이트 효과가 매우 한정적이니 원하는 테마나 하이라이크 효과가 없다면 직접 수정 해보시길!

Comments