티스토리 소스코드 코드블럭 꾸미기

티스토리 소스 코드 블럭 꾸미기

- 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기 

- highlightjs.org의 CDN을 활용 

 

 

방법

1. 사이트 방문  https://highlightjs.org/download/

 

2. cdnjs 복사 하기 

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>​

 

3. 티스토리 설정에서 HTML 편집 

 

 

4. Head  사이에 복사한 내용 붙여 넣고 적용

 

 

5. 적용 확인 

 

6. 테마 변경 가능 

https://highlightjs.org/static/demo/ 사이트에서 테마를 선택 하여 

가져온 CDN에서 아래 경로에서 default를 변경해 주면 가능하다. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">

 

둘러 보다 보니 어두운 배경이 맘에 들어 agate 테마로 선택.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/agate.min.css">

 

소스코드를 수정하고 적용하면 변경 완료!!