기록보관소
티스토리에 코드 하이라이트 적용하기 (highlight.js)
Peter Ahn
2018. 4. 25. 18:29
반응형
안녕하세요 Peter입니다.
티스토리에 포스팅할 때 코드 구문 강조를 해주는 highlight.js 를 소개합니다.
Syntax Highlighter과 비교해서 사용이 좀 더 간편하기 때문에(code마다 brush를 지정하지 않아도 되기 때문) 추천드립니다.
아래 홈페이지에서 다운로드를 받아서 적용해도 되고 CDN을 통해 바로 적용을 할 수도 있습니다.
적용 방법
우선 https://highlightjs.org/ 에서 Get Version 9.12.0 을 클릭하시면 CDN 주소를 확인할 수 있습니다. (버전은 조금 다를 수도 있습니다)
그리고 usage 를 클릭하면 사용 방법이 안내되는데요. 티스토리에 적용하려면 아래와 같이 해주시면 됩니다.
[블로그 관리] - [스킨 편집] - [html편집]
위 그림과 같이 html의 <head>와 </head> 사이에 아래의 코드를 추가하시면 됩니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
아래로 쭉 내리셔서 </body> 바로 위에 아래 코드를 추가해줍니다.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
그리고 포스팅할 때 아래와 같이 태그를 쓰시고 ... 에 코드 내용을 집어넣으면 코드 구문 강조가 적용됩니다.
<pre><code>...</code></pre>저는 글쓰기 모드에서 외부컨텐츠를 이용해서 아래와 같이 소스를 입력해서 사용중입니다.
아래 내용은 줄번호를 자동으로 추가해주는 방법입니다.
반응형