티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기.

방법은 2가지다.

1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다.

 

 

---

2) 직접 스타일을 받아서 바꾼다.

( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 상태여야한다. 별 다섯개!!!!! )

 

1. 원하는 스타일의 폰트를 고르기

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

highlight.js demo

여기 들어가서 원하는 스타일의 폰트를 고른다.

 

 

나는 Atom One Dark를 골랐다.

 

 

2. 설치방법을 선택하기

폰트를 설치하는 방법은 두가지가 있다.

첫번째는 파일 다운로드를 하지않고 네트워크로 연결해서 바꾸는 cdnjs 방법.

두번재는 파일을 다운로드해서 폰트를 바꾸는 방법.

 

첫번째는 간편하지만 인터넷 상황이 좋지않을때는 폰트가 어떻게 이상하게 바뀔지 모른다.

두번째는 일단 파일을 다운로드 받으니 컴퓨터 내에서 용량을 차지한다.

각자에게 편한 방법을 선택하자.

 

 

첫번째. cdnjs 설치 방법

https://highlightjs.org/download/

Getting highlight.js

 

이 주소에 들어가서 다음에 보이는 주소를 복사하자.

 

 

 

티스토리 블로그관리 > 스킨편집 > html 편집 > html에 들어가자

 

 

 

빨간색 박스에 보이는것처럼 </head> 바로 위에 복사한 코드를 붙여넣으면 된다.

head의 끝부분을 못 찾을 경우 -> 제일 처음 head를 클릭하면 이어진 마지막 head가 이미지처럼 형광펜 효과로 표시가 된다.

 

원하는 폰트는 파란색 박스에 기존 폰트를 지우고 넣으면 된다.

원하는 폰트명을 넣을때는 띄어쓰기는 -로, 대문자는 소문자로 바꿔서 넣으면 된다.

내 경우는 Atom One Dark 였으므로, atom-one-dark로 바꿔서 넣었다.

 

 

 

 

 

두번째. 다운받아 설치하는 방법

처음에 들어갔던 링크에서 아래로 내리면 다운을 받을 수 있는 곳이 나온다.

원하는 언어를 선택한 후 아래에 있는 download를 눌러 다운을 받는다.

 

 

 

티스토리 블로그관리 > 스킨편집 > html 편집 > html에 들어가자

 

<link rel="stylesheet"
      href="./images/atom-one-dark.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

위 코드를 복사해서 붙여넣자. 

 

빨간색 박스에 보이는것처럼 </head> 바로 위에 복사한 코드를 붙여넣으면 된다.

head의 끝부분을 못 찾을 경우 -> 제일 처음 head를 클릭하면 이어진 마지막 head가 이미지처럼 형광펜 효과로 표시가 된다.

 

다운 받은 폴더를 각각 열어보면 코드에 적혀있는 파일명을 찾을 수 있다.

아까 사이트에서 봤던 폰트는 style폴더에 있다. 파란색 박스에 기존 폰트를 지우고 파일명을 넣으면 된다.

 

 

 

파일업로드에 다운로드한 파일을 추가한다.

 

 

 

 

여기까지하면 코드가 티스토리에 반영된 것을 확인할 수 있다.

 

 

 

---

만약, 여기까지했는데도 설정이 안되는 경우

블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일이 해제상태인지 확인한다.

스타일이 중복적으로 겹쳐져있는 경우라서 후에 우리가 추가한 스타일이 잘 적용이 되지 않다고 봐야한다.

이미 여기저기 수정한 상태라면 어쩔 수 없다.

맨 처음 순정상태로 돌아가서 코드블럭 스타일을 해제하고, 차근차근 다시 적용해보자.

 

이 주의점을 왜 쓰냐면 내가 저걸 발견을 못해서 다섯번을 지우고 설치하고 1시간을 날려먹었기 때문....

 

 

 

---

아름다운것에 대한 사람의 욕심은 끊이질 않지.

• 작성하고보니 코드블럭 모서리가 둥글었으면 좋겠고
• 줄간격도 좀더 떨어졌으면 좋겠고
• 코드블럭 내부에 간격도 줬으면 좋겠다.

잘 적용하고 블로그 게시글로 정리해두었다.

https://hancoco.tistory.com/77

티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin