본문 바로가기
카테고리 없음

Tistory 에 highlight.js 코드스타일 적용시키기.

by Deafhong 2017. 1. 4.
반응형



안녕하세요. 데프홍입니다.



티스토리에 코드스타일을 적용시키려고 하는데, 기본적인 기능이 없더군요..

그래서 서치해본 결과, highlight.js 및 css 파일을 연결 시켜주면 적용이 가능하다는 말에 바로 적용을 시켜 보았습니다.


적용시키는 게 간단하니.. 그대로 따라 하시면 되겠습니다.




1. highlight.js 을 다운 받기 위해 공식 사이트로 접속하여 Get version x.x.x 을 클릭합니다.



2. 표시 시켜줄 언어를 선택합니다. ( Common 은 기본 선택, Ohter 에서 본인이 추가하고 싶은 언어를 추가. )



3. 아래로 화면을 내려서 Download 버튼을 눌려서 다운 받고, 압축된 파일을 풉니다.


4. Tistory 의 관리 페이지 -> 꾸미기 항목 중 HTML/CSS 편집 을 클릭합니다.


5. 파일업로드 탭에서 아래 추가버튼을 누릅니다.



6. highlight.pack.js 파일을 추가하고, 그다음, styles 에 있는 css 파일들을 모두 추가해 줍니다.


7. HTML 편집을 통하여 올린 파일이 페이지에 적용이 되도록 <head></head> 태그 안에 내용을 추가해주는데, <link> 태그 리스트 중 마지막 위치에서 아래 내용을 추가해 주시면 됩니다.




8.[default] 부분에는 적용시키고자 하는 테마 이름을 지정해 주시면 됩니다.

 ex) [default].css => monokai-sublime.css


9. 적용시키고자 하는 코드스타일은 class 명에다가 지정을 해 주시면 됩니다.


자세한 내용을 알고 싶으시면. highlight.js 홈페이지를 참고해 주세요.



반응형