[라이브러리]티스토리 코드블럭 스킨 적용(highlight.js) + 적용오류 해결

티스토리 블로그에 코드 블럭 스킨 적용하는 방법

(highlight.js)

 

?. 코드블럭이란 게시글에 코드를 넣을 때 최적화 시켜주는 툴이다.

 

 

여기서 여러가지 언어를 선택할 수 있다.

 

 

스킨을 사용하지 않으면 평범한 코드블럭 형태가 나온다.

 

하지만 평범한 스킨이 싫다 싶은 사람들은 코드 스킨을 사용하면 자신만의 블로그 색깔을 만들 수 있다.

아래 순서대로만 따라오면 쉽게 적용할 수 있다.

 

01. 블로그 설정에서 '플러그인 - 코드 문법 강조' 선택

 

 

02. 적용 클릭

 

 

03. '스킨 편집' 클릭하고 창 먼저 띄워두기

 

 

04. https://highlightjs.org/

highlight.js

위 링크 클릭하여 사이트에서 버튼 클릭(다운로드 기능은 아닙니다.)

 

 

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

05. 위 코드블럭을 복사해 주세요.

박스 안의 'default' 부분은 참고하고 지나가주세요.

 

 

06. 위 3번 과정에서 띄운 '스킨 편집'에서 </head> 위에 복사한 코드들을 붙여 넣습니다.

 

 

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

highlight.js demo

위 링크로 들어가면 왼쪽에 테마 종류들이 나와있습니다. 마음에 드는 걸 선택해서 기억해 주세요.

 

 

08. 앞서 한 번 보여드린 'default' 부분에 마음에 드는 테마 이름을 넣으면 됩니다.

다만 대문자는 소문자로, 띄어쓰기는 - 로 대체해서 넣어야 적용이 됩니다.

 

아래는 제 블로그 스킨입니다.(an-old-hope)

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/an-old-hope.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

 

이렇게까지 하고 적용하고 글쓰기 하고 테스트해보면 블로그스킨이 적용된걸 학인할 수 있습니다.

(글쓰기 페이지에서는 적용이 안 되는 것 같습니다.)

 

---

+ 블로그 스킨이 제대로 적용이 안되는 경우

저 같은 경우는 위 방법대로 했는데 자꾸 이상한 스킨이 나오길래 찾아봤더니 이상한 css가 적용되고 있어서

이게 뭔가 찾아봤는데 1번에서 적용한 '코드 문법 강조'가 먼저 먹혀서 highlight.js가 안 먹히고 있었습니다.

 

 

그래서 다시 들어가서 해제를 하고 나니까 제가 적용하고 싶은 스킨이 제대로 적용하는 걸 확인할 수 있었습니다.

 

여러분도 혹시 css가 잘 안 먹힌다면 위 항목을 체크해 보시길 바랄게요 :)