티스토리 코드 하이라이트(Hightlight JS)

티스토리에서 코드하이라이트에 쓰는 방법이 3가지 정도 있는 것 같습니다.

1. SyntaxHighlighter

2. Highlight JS 

3. Color Scripter

 

1번은 과거에 몇번 써봤는데 괜찮았네요ㅎㅎ 하지만 2번이 떠오르는 샛별 ! 지원 언어도 더 많은 것 같고 ~!

스킨도 좀 더 깔끔한 느낌이 있습니다~ 따라서 Hightlight JS 로 결정!

 

자자.. 따라해봅시다.

 

step 1. https://highlightjs.org/  로 접속

step 2. Get version XXXXX  버튼 클릭

step 3. highlight 하고 싶은 language들을 고른 후, Download 버튼 클릭 (많이 선택해도 용량이 굉장히 적으니 별 상관없네요 ㅎㅎ)

step 4. 다운받은 file의 압축을 풀어봅니다.

 

step 5. 자..이제 티스토리에 적용해 볼까요? 관리자모드에서 (HTML/CSS 편집 -> 파일업로드) 로 가서,

다운받은 file들을 업로드 추가하고 저장합니다.

저는 styles 폴더 밖에 있는 file 5개와..(readme file은 그냥 추가 했습니다..)  styles 폴더 안에서 제가 사용할 맘에드는 스킨 하나만(androidstudio.css) 추가했습니다.

추가하고나니 경로는 images/ 로 시작하게 되었네요.. -0-

 

step 6.  HTML 탭으로 가서.. (파일업로드 옆에 있음) 살짝 편집하고 저장해 줍니다.

저는 아래와 같이 4줄을 넣었네요,  이 때, 경로는 아까 파일업로드에서 올린것과 같은 경로로 반드시 바꿔주시길 !!

저는 ./images/ 로 시작하겠죠 당연히 ~ 우후훗

 

step 7. 이제.. 글만 포스팅하면 됩니다..  우선 글쓰기 할 때 오른쪽 위에 HTML 모드를 선택한 다음,

아래처럼 pre와 code태그를 써줍니다. class는 programming language 이름이겠죠?

 

step 8. 그런 다음 HTML 모드를 끄고 다시 정상적으로(?) 글을 쓰게 되면 빈 박스가 하나 나타날 테고, 여기에 포스팅 하실 source code를 붙여넣기 해주시면??

아래 그림처럼 !  코드를 써놓았습니다 ! 이제 글쓰기를 완료해주시면 되겠군요.

 

 

step 9. 실제로 c언어 코드 하이라이트가 완성된 모습입니다.

#include <stdio.h>

int main()
{
   printf("Hello world!");
}

 

 

- 참고 링크 - 

스킨(테마) 구경 : https://highlightjs.org/static/demo/

공식 사용법 : https://highlightjs.org/usage

관련 Docs : http://highlightjs.readthedocs.io/en/latest/