티스토리 소스코드 보여주는 방법

간혹 블로그에 돌아다니다가 보면

소스코드가 아주 이쁘게 잘 정리되어 있는 블로그들을 볼 수 있다.

본인도 이게 너무도 궁금하여 찾던 중,

syntaxhighlighter 라는 것을 찾게되었다.

일단 이것을 찾는 사람은 어느정도 컴퓨터를 잘 알고 있을테니, 간단하게 요점만 설명하겠다.

 

syntaxhighlighter_3.0.83.zip

 

ㅇ 파일 다운로드

압축을 풀면 다음과 같은 폴더가 있다.

여기서 script 폴더와 styles 폴더만 있으면 된다.

 

관리 페이지에서 HTML/CSS 편집에 들어가서

파일 업로드 탭 선택 후

위에서 다운로드 받은 Scripts 폴더와 Styles 폴더안에 모든 파일을 업로드 한다.

 

 

올린 파일 중 하나를 선택하고 마우스 우측버튼 클릭 후 속성을 선택하면

다음과 같은 창이 뜬다.

주소를 복사하자

 

다음 그림과 같이 skin.html에 상단에 다음과 같이 붙여넣자.

<SCRIPT type=text/javascript src="http://cfs.tistory.com/custom/blog/85/853232/skin/images/shCore.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://cfs.tistory.com/custom/blog/85/853232/skin/images/shBrushCpp.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="http://cfs.tistory.com/custom/blog/85/853232/skin/images/shCoreDefault.css">
<SCRIPT type=text/javascript>SyntaxHighlighter.all();</SCRIPT>
 

그리고 저장하면 완료.

 

 

ㅇ 사용방법

글을 쓸때 html 모드로 변경 후

다음과 같이 앞 뒤로 태그 써주면 간단하게 해결.

<PRE class="brush: cpp;">소스코드</pre>

brush : cpp 은 옵션 값이다. 변경 가능하다.

ㅇ 장점 

syntaxhighlighter_3.0.83 --> 이전 버전 사용시 블로그에서 소스 코드 복사 시 라인 번호까지 복사됨.

해당 버전은 줄번호는 보이지만 복사는 안되서 매우 편리함.

ㅇ 주의사항

단 소스 코드 편집시 < > 때문에 소스코드가 이상하게 나타나는 경우가 생기는데 이는 소스 코드를 html코드에 맞도록변환해서 사용해야 할 듯 하다.

 변환 프로그램 다운로드 :   http://emflant.tistory.com/42