서론
티스토리 에디터에는 코드를 삽입해주는 코드블럭이 있다.
그런데 이 코드블럭은 에디터 수정시에는 하이라이트가 적용되어 있으나, 포스팅하면 적용되어 있지 않다.
따라서 블로거가 직접 하이라이트를 적용해야한다.
여러 하이라이트가 있지만, 이 글에서는 가장 대중적인 highlight.js를 이용한다.
코드블럭에 하이라이트가 적용되지 않는 이유는 블로거의 자율성을 위한것이라고 티스토리 블로그에 나와있다.
https://notice.tistory.com/2483
본론
하이라이트 설치
https://highlightjs.org/download/
위 사이트에 방문하여 사용할 언어들이 Custom pakage중 Common에 모두 포함되는지 확인한다.
만약 없다면 이 글에서 소개할 CDN 방식이 아닌 다운로드 방식을 이용해야 한다.
*다운로드 방식은 사용해 볼 때까지 포스팅 계획이 없습니다.
다시 스크롤을 올려서 Hosted에 cdnjs의 코드를 복사한다.
버전이 계속 업데이트 되므로 공식 홈페이지에서 복사하기를 권장합니다.
블로그 관리 -> 스킨편집 -> html편집으로 이동한다.
html에서 <head>와 </head> 사이에 복사한 cdnjs코드를 붙여넣는다.
그리고 붙여넣은 코드 바로 아래에 아래 코드도 붙여넣는다.
<script>hljs.initHighlightingOnLoad();</script>
위의 적용버튼을 누르면 코드블럭에 하이라이트 처리가 된 것을 볼 수 있다.
스타일 변경
highlight.js는 다양한 스타일을 지원한다.
https://highlightjs.org/static/demo/
위 사이트에 방문 후 Styles를 통해 여러 스타일을 확인할 수 있다.
원하는 스타일을 찾은 후,
https://github.com/highlightjs/highlight.js/tree/master/src/styles
에 방문하여 자신이 원하는 스타일의 정확한 이름을 찾는다.
위 사진의 Monokai Sublime는 monokai-sublime로 되어있다.
다시 블로그 관리 -> 스킨편집 -> html편집으로 이동한다.
아까 붙여넣은 코드를 찾고 default를 원하는 스타일 이름으로 수정한다.
적용하면 스타일이 수정된것을 확인할 수 있다.
최근댓글