Source Code 가독성 있게 블로깅 하기

C, C++ 소스를 올리려는데 가독성이 너무 안좋군요... 예전 블로그는 어떻게 하는 지 잘 몰랐는데...
티스토리는 정보가 많더군요. 우허허허허ㅋ 그래서 검색했습니다.

http://withrobot.tistory.com/180 여기서 참조를 했습니다.

우리의 목표는 바로 아래 화면ㅋㅋ

자 그럼 시작해 볼까요.
순서는 withrobot 님과 동일 합니다.

설치 방법은 3단계.
1. 다운로드 받아 압축 풀기
2. 티스토리의 스킨에 업로드
3. 스킨 수정하기

1. 다운로드 받아 압축풀기
SyntaxHighLighter의 홈페이지, 다운로드
압축을 해제 하면 아래 그림과 같이 세개의 폴더가 나옵니다.

2. 티스토리의 스킨에 업로드
네 이젠 Scripts 폴더와 Script 폴더에 있는 모든 파일을 올려야 해요.
티스토리의 관리자로 이동해서 스킨탭의 HTML/CSS 편집을 선택해 주세요.

스킨 탭의 HTML/CSS 편집으로 들어가서

파일 업로드를 선택해 주세요

Scripts 폴더와 Styles 폴더의 파일을 모두 업로드해주세요.
전 근데 IE8에서는 업로드가 안되더라구요? 그래서 IE7에서 작업했습니다.


3. 스킨 수정하기
이젠 HTML/CSS를 편집해야 할 차례입니다.
다시 스킨탭에서 HTML/CSS 편집을 선택합니다.

위에 밑줄친 부분에 <link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link> 를 삽입합니다.

그 다음 옆의 슬라이드 바를 끝까지 내리면
</body>
</html> 로 끝나는 것을 확인할 수 있다.

</body> 앞에 다음 문장을 추가한다.

<script class="javascript" src="./images/shCore.js"></script>
<script class="javascript" src="./images/shBrushCSharp.js"></script>
<script class="javascript" src="./images/shBrushCpp.js"></script>
<script class="javascript" src="./images/shBrushCss.js"></script>
<script class="javascript" src="./images/shBrushDelphi.js"></script>
<script class="javascript" src="./images/shBrushJScript.js"></script>
<script class="javascript" src="./images/shBrushJava.js"></script>
<script class="javascript" src="./images/shBrushPhp.js"></script>
<script class="javascript" src="./images/shBrushPython.js"></script>
<script class="javascript" src="./images/shBrushRuby.js"></script>
<script class="javascript" src="./images/shBrushSql.js"></script>
<script class="javascript" src="./images/shBrushVb.js"></script>
<script class="javascript" src="./images/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

자 수고 하셨습니다. 이제 글 쓰시면 되요. 마쳤으면 [저장하기] 버튼을 클릭하고 블로그 화면이 원래대로 나오는지를 확인한다.

자 이제 적용 단계이다.

아쉽게도 위지윅 모드에서 바로 적용하는 방법은 없다. 글을 쓰다가 소스 코드를 넣고 싶은 부분에서 메뉴바에 [EDIT] 버튼을 클릭하여 HTML 편집 모드로 전환한다. 그 다음 다음과 같은 문장을 추가한다.

<textarea name="code" class="Python" cols="60" rows="10">
코드는 여기에 복사한다.
</textarea>

http://withrobot.tistory.com/180 님이 python을 하셨기 때문에 저도 그렇게ㅋㅋㅋ 저 부분을 C++이나 C로 입맛에 맞게 바꿔 주세요.
수고 하셨습니다. 이젠 http://moltak.tistory.com/entry/Server-Socket-1 처럼 만들 수 있을 겁니다. 즐프 하세요~