티스토리 코드 하이라이트 적용하기

하이라이트 설정하기

방법 1.

티스토리에서 제공하는 플러그인을 사용하여 간단히 적용한다. 

 - 장점 : 설정이 매우 쉽고 간단함

 - 단점 : 다양한 스타일 구현이 어려움 (7개 정도의 선택지가 있음)

 

블로그 관리 > 플러그인 으로 이동하여 'Syntax Highlight'를 찾아 선택한다.

테마를 선택하고 적용을 누르면 설정은 끝난다.

테마 미리보기는 제공되지 않음

 

방법 2.

github에 올라와있는 highlight.js를 적용한다. 훨씬 다양한 스타일이 있으며, 하이라이트 스타일은 highlist.js demo에서 미리 확인한다. 현재 버전 9가 사용되고 있으며 버전에 따라 적용 방법이 상이할 수 있으니 유의한다.

 - 장점 : 다양한 코드 스타일을 적용할 수 있음

 - 단점 : 설정이 방법1 보다 좀 더 복잡함

 

github에 올라온 파일을 다운로드 하여 내 블로그에 업로드 하는 방법도 있지만, 그 주소를 코드로 입력하여 받아 쓰도록 설정하고자 한다. cndjs.com를 참고하여 최신 버전(혹은 원하는 버전)의 highlist.js 깃허브 주소를 확인한다.

cdnjs.com에서 'highlight.js'를 검색

아래 코드를 복사해 사용하는데, cdn에서 봤던 주소를 하늘색 부분에 넣고 그 주소에서 버전 까지만 사용해서 첫번째 링크 주소에서 동일하게 입력한다. 그 뒤 붉은 부분은 스타일 설정 부분으로, 굵은 글씨 부분을 원하는 스타일의 이름으로 수정한다. 아래 예시는 vs2015 스타일을 사용하려할 때이다.

 

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

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

 

 

그런 다음, 블로그관리 > 스킨편집 > HTML편집 으로 이동하여 다음과 같이 코드를 삽입하면 끝이다.

 

---

코드 스타일 적용하기

글 쓰기 할 때 옵션 더보기에서 '코드 블럭'을 선택하여 코드를 입력하면 앞서 설정한 코드 스타일이 적용된 박스 형태로 코드를 입력할 수 있다. 글 쓰는 상태에선 스타일이 보여지지 않고 글 게시 후에 스타일 적용된 것을 볼 수 있다.