티스토리 프로그래밍 소스코드 보기 / SyntaxHighlighter

티스토리 블로그에 프로그래밍 소스를 올려야하는데 그냥 올리면 가독성이 별로 좋지 않아서 짜증나신다구요??

소스 올릴때 더 멋있게 올리고 싶으시다구요??

그러면 SyntaxHighlighter를 이용하시면 됩니다!

SyntaxHighlighter을 이용하면 위와같이(Default 테마) 소스를 보기 좋게 출력할 수 있습니다.

그럼 어디서 다운받고 설치하냐구요??

바로 여기서 다운받으시면 됩니다!

귀찮으시면 블로그에서 바로 받으시고, 가급적이면 공식 홈페이지에서 받아주세요!

이 글을 보는 당시 최신버전이 나와있을지도 모르니까요! XD

자 그럼 이제 다운받으신걸 어떻게 사용하느냐!

우선 티스토리 관리페이지에 들어갑니다.

그 후 '꾸미기 - HTML/CSS 편집' 메뉴에 들어가주세요.

그 메뉴에서 상단에 '파일업로드' 탭을 선택해주시고, 아까 받은 syntaxhighlighter 압축파일 안에서

Scripts, Styles 폴더만 추가 버튼을 클릭하여 업로드 해 주세요!

다른 폴더는 필요 없습니다.

그 다음 파일을 추가했으면 그 파일을 사용하여 포스트에서 볼 수 있도록 소스를 추가해주어야겠죠?

방금 전 그 창 그대로 상단 'HTML/CSS' 탭을 클릭해줍니다.

그 다음 skin.html 파일 안에서 'Ctrl + F'를 이용하여 '</body>'를 찾아줍시다.

그 다음 아래 스크립트를 입력해주시고 저장 해 주시면 SyntaxHighlighter 설치는 끝이 납니다.

그럼 사용하는 방법을 알아야겠죠?

사용은 간단합니다.

SyntaxHighlighter을 설치한 블로그에서 글을 작성하실 때 HTML모드로 변경하신 후, 아래와 같은 소스 안에 소스를 넣어주시면 적용됩니다.

Msgbox("Hello Guys!") '소스 입력

</pre>

위 예제는 VB.NET 브러시가 적용된 상태입니다.

다른 언어를 입력하고 싶으시면 사용 언어에 맞게 브러시를 변경 해 주시면 됩니다.

각 언어에 대한 브러시는 위에서 확인하실 수 있습니다.

해당 언어에 맞게 HTML 태그를 작성해주세요.

소스 테마를 선택할 수 있습니다.

위 주소에서 마음에 드는 테마를 선택하여 skin.html에서 shThemeDefault.css를 검색하시고 원하시는 테마 파일명으로 수정해주시면 됩니다.

Bell's Daily Life & Powerful Programming