티스토리 블로그에 코드블록 테마입히기 (Highlight 테마적용)

글 쓰다 보니까 코드 슬 때마다 안 이쁨!!!!

 

그래서 나도 남들처럼 코드블록 이쁘게 쓰는 방법을 알아봤다.

일단 글 쓰면서, 적용해 보겠다.

 

적용하지 않는 코드 블록은 이렇게 나온다.

내 글중 하나!!!

 

진짜... 칙칙 그 자체!!!!!

 

자 그럼 Highlight 테마를 적용해보자

 

 

Highlight.js

참고 링크 : https://highlightjs.org/

 

뭐 이런 느낌!!! 뭔가 친숙~~~~

나는 VS 스타일로 적용해 볼 거다

 

"Get Version" 클리하면

 

 

이런 창으로 넘어간다.

여기서 그냥 우리는 "cdnjs" 코드 부분을 가지고 테마를 적용할 거다.

 

근데 

default.min.css로 돼있다.

이거... 또 안 이쁜 거 같다!!!

 

그럼 나는 VS 2015 태마로 선택!!

 

 

테마 사이트는 : https://highlightjs.org/static/demo/

highlight.js demo

여기서 참조해서 가지고 오면 된다.

 

 

자 그럼 코드를 준비해둔다!!

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

 

"default.min.css"에서 원하는 테마로 바꿔주기만 하면 된다. 나의 경우는 vs2015.min.css로 

 

그다음은 블로그에서 적용해보기

 

티스토리 블로그 관리에서 설정

블로그 관리 > 스킨 편집 > html 편집 순서로 들어가서 위에 준비한 코드를 삽입할 거다.

 

그럼 우측에 이런 놈이 있다. 클릭하고

 

 

적용한다.!!!!!

 

이렇게 하면 끝!!!

 

글이 길이지만, 하는 거 별로 없다.

이제 이쁘게 써보겠다 ㅎㅎ