코드 블럭 테마 변경 방법

tistory 작성 도중 코드블럭을 감싸서 작성하는 경우가 있는데,

아무런 설정 없이 글 작성 할 경우 뭔가 밋밋한 모양으로 나오는 것 같아서 바꾸고 싶어졌다.

 

 

설정 전

 

 

그냥 맘에 안들었다. 

 

한번 바꿔보자

 

1.  티스토리 내 테마 사용

https://${내 블로그}.tistory.com/manage/plugins

 

위 링크로 이동 (자신의 블로그 링크로 이동)

 

코드 검색 > 코드 문법 강조 클릭 

원하는 테마 선택

 

기본

 

Atom One Dark

 

Atom One Light

 

Github

 

Monokai

 

Darcula

 

Visual Studio

 

Xcode

 

근데 내가 보기에는 큰 차이가 없다 느껴져서,, 티스토리에서 추천하는 테마 가이드를 확인 할 수 있었다.

자세히 보기 클릭시 이동

 

 

근데 위 링크를 누르면 github로 이동하는데 뭐가 뭔지 원 모르겠다. 

 

https://highlightjs.org/demo

Demo - highlight.js

 

1. 우선 위 링크로 이동해서 내가 쓰고싶은 테마를 고르자

 

2. 고른 뒤 마음에 드는 테마가 있다면 해당 테마를 기억해두고 아래 사이트로 이동

https://highlightjs.org/#usage:~:text=our%20README.-,As%20HTML%20Tags,-cdnjs

highlight.js

 

3. 해당 사이트의 제일 하단의 cdnjs 부분을 모두 복사

 

4. 관리자 > 꾸미기 > 스킨 편집 클릭

 

html 편집 클릭

확인 클릭

 

 

5. HTML 탭의 head 태그 부분에 3번에서 했던 작업의 복사본을 집어넣는다.

근데 복사본의 첫 줄의 link 태그의 default 부분을 마음에 드는 테마로 변경

<https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">

 

나는 nord로 변경해서 적용했다.

<https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/nord.min.css">

 

 

삽입 후 적용 눌러주면 끝

 

나는 Atom One Dark테마를 추가로 적용해줬더니

 

before

after

 

근데 적용해도 큰 차이가 없는거같아서 내가 잘 못한건지 더 찾아봐야 할거같다.

아니면 nord 테마가 별로인건지도..?

 

 

 

참고

https://0secusik0.tistory.com/69

[Tistory] 코드 블럭 테마 변경하기