티스토리에 프로그래밍 소스 깔끔하게 넣는 방법(SyntaxHighlighter)

프로그래밍을 하다가 도저히 답이 안나올 때 인터넷을 통해서 찾아보는데

그냥 소스코드만 쭉 텍스트로 적어놓은 것보다는 가독성 있게 코드를 정리해놓은 것이 보기 편하더라구요

블로그에 프로그래밍 정리좀 하려고 찾아보다가 티스토리 블로그에 깔끔하게 소스코드를 넣을 수 있는 방법을 찾았다!!

이왕이면 가독성 있게 정리해놓는 것이 나중에 찾아보기도 좋을 것 같아서 SyntaxHighlighter를 적용해보려고 한다.

<다운로드> http://alexgorbatchev.com/SyntaxHighlighter/download/

페이지에 접속을 하면 위와 같은 화면이 나오는데 Click here to download 를 클릭하여 다운로드를 받자

다운을 받은 후 압축을 풀게 되면 위와 같은 파일이 나올텐데 scripts 폴더 내 파일과 styles 폴더 내 파일을 티스토리 HTML/CSS 에 파일을 업로드해야 한다.

티스토리 블로그 관리화면에서 HTML/CSS 편집으로 들어간다.

파일 업로드를 누르고 추가를 눌러서 

scripts 폴더 내 파일과 styles 폴더 내 파일을 업로드한다.

요렇게 파일이 올라가면 업로드 완료!!!

이제 파일업로드 옆에 있는 HTML/CSS 로 이동한다.

</head> 위에 다음 코드를 입력 한 후 저장한다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

이제 SyntaxHighlighter 설치는 끝났다.

블로그에 글을 작성할 때 SyntaxHighlighter를 이용해서 작성하면 된다.

코드를 넣을 때 HTML 모드에서 <pre class="brush:브러시이름"> </pre> 사이에 코드를 입력해주면 된다.

브러시는 위 표를 참조해서 원하는 언어에 따라 입력해주면 된다

예를 들어 C언어라면 <pre class="brush:c"> 요렇게 입력하면 된다.

#include 

int main(void)
{
printf("Hello word");

return 0;
}

간단하게 테스트로 Hello word ㅋㅋㅋㅋㅋㅋㅋ

이쁘게 잘뜨네 ㅎㅎ 끝에 </stdio.h>는 원래 들어가는 건지 안들어가게 설정이 가능한지 좀 더 찾아봐야 할 것 같다. 

Html에서 탭이 안먹어서 들여쓰기 할 방법도 찾아야 겠다...