티스토리 뷰
highlight.js 적용기
SomeResource resource = null; try { resource = getResource(); use(resource); } catch(...) { //someting } finally { if (resource != null) { try { resource.close(); } catch(...) { /* 아무것도 안 함 */ /} } }
서론
syntax highlighting할 수 있는 highlight.js 를 적용하기 위해서는 총 3단계의 과정을 거치게 됩니다.
step 1. highlight.js를 티스토리에 설치한다.
step 2. html 편집모드에서 코드를 삽입한다.
step 3. 자신이 원하는 syntax highlighting 스타일을 적용한다.
본론
step 1. highlight.js를 티스토리에 설치한다.
highlight.js의 홈페이지를 방문해보자. https://highlightjs.org
Get version 9.12.0 버튼을 클릭하면 있는 주소 cdnjs 와 jsdelivr 2가지 주소가 보일것입니다.
그중에서 저는 아래의 cdnjs를 사용해서syntax highlighting을 적용하였습니다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>블로그관리 > 꾸미기 > 스킨편집 > html 편집으로 이동해서 <head></head> 태그 안쪽에 아래와 같이 추가 해주면 설치 완료입니다.
step 2. html 편집모드에서 코드를 삽입한다.
<code> 태그에 class="java" 등의 언어를 설정 해주면 해당하는 언어로 렌더링되어 표현됩니다.
<pre> <code class="java" > public static void main(String[] args){ //TODO } </code> </pre>
html이나 xml 마크업 언어를 삽입할 때는 <(<) >(>)룰 사용해서 마크업을 해주셔야합니다. 이 부분이 좀 아쉬운부분입니다.
<pre>
<code class="html" >
<div>이 부분이 매우 불편하네요... 해결 방법은 없을까요? </div>
</code>
</pre>
실제 html모드에서 입력한 모습입니다. 표현하기 힘들어서 캡쳐했습니다...
step 3. 자신이 원하는 syntax highlighting 스타일을 적용한다.
아래의 링크에 가보시면 다양한 syntax highlighting css파일들이 있는 것을 볼 수 있습니다.
https://github.com/isagalaev/highlight.js/tree/master/src/styles
참고로 저는 atom-one-dark.css를 적용했습니다.
주의. atom-one-dark.css를 적용할 때 .css 확장자 앞에 .min을 꼭 추가해서 사용해주세요.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
이상으로 티스토리에 syntax highlighting 적용기였습니다. 참고가 되셨으면 좋겠습니다. 좋은 하루 보내세요. ^^