티스토리 코드블럭 Highlight 스타일 적용하는 방법

 

안녕하세요. RootKR입니다.

 

티스토리 글쓰기 에디터 개편되면서 새로 추가된 기능중 하나가 코드블럭 기능입니다.

 

글쓰기 에디터내에서는 스타일(테마) 적용되서 깔끔하고 이쁘게 나오지만, 게시물에서는 스타일(테마) 적용되지 않아서 아쉽더군요.

 

Highlight 자바스크립트 파일을 이용해서 하이라이트 스타일 적용하는법을 알려드리겠습니다.

 

 

자신의 블로그 관리 페이지에서 꾸미기의 "스킨편집 " 버튼을 클릭해주세요.

 

"HTML 편집" 버튼을 클릭해주시고 </head>위에 아래 소스를 복사해서 붙여 넣어주세요.

 

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

 

highlight 기본 스타일(default.min.css)가 싫으시다면 첫번째 주소를 들어가서 마음에 드는 스타일을 찾아주세요.

 

2번째 링크를 들어가서 마음에 드는 스타일 파일 이름을 찾으신후, default를 지우고 원하는 스타일 파일 이름으로 바꿔주시면 됩니다.

 

AndroidStudio 스타일을 사용하고 싶으면 androidstudio.min.css로 수정하면 됩니다. min.css 지우면 안됩니다.

 

하이라이트 데모 페이지 : https://highlightjs.org/static/demo/

하이라이트 스타일 리스트 :  https://github.com/highlightjs/highlight.js/tree/master/src/styles

 

 

AndroidStudio 스타일 적용해서 자바 Hello World를 나오게 해봤는데, 깔끔하고 이쁘게 나오네요.