소스코드 티스토리 블로그에 예쁘게 올리기 (펌)

원문글: http://withrobot.tistory.com/180

invalid-file

python이나 임베디드 쪽에서 사용하는 C 코드를 블로그에 올리다보니 가독성이 무척 떨어진다. 뭔가 방법이 있겠지하고 찾아보니 Google에서 Java 코드로 제공하는 SyntaxHighlighter를 설치하면 티스토리에서 깔끔하게 올릴 수 있다는 것을 확인했다.

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


1. 다운로드 받아 압축풀기
SyntaxHighLighter의 홈페이지, 다운로드
압축을 풀면 다음 그림처럼 세 개의 폴더가 존재한다.

이 중에서 Scripts에 있는 파일과 Styles에 있는 파일을 티스토리로 옮길 것이다. Uncompressed 폴더 내용은 페이지 로딩 속도를 고려하면 굳이 올릴 필요가 없다.

2. 티스토리에 올리고 스킨 수정
자신의 블로그 관리자 모드로 들어가서 상단 메뉴 중 [스킨] 항목을 선택한 후 하위 메뉴에서 | 직접 올리기 | 를 선택한다. 스크롤 바를 내리면 아래 그림과 같이 [파일 업로드] 단추가 보인다. 클릭한 후 좀 전에 압축을 푼 Scripts 폴더와 Styles 폴더의 모든 파일을 선택하여 업로드한다. (이상하게 firefox에서는 이 단계에서 파일 업로드가 안되는 것을 경험하였다. 어쩔 수 없이 IE에서 작업을 했으며, 원인은 잘 모르겠다.)

다음은 스킨을 수정해야 한다. | 직접 올리기 | 옆에 있는 | HTML/CSS 편집 |을 선택한다.
상단의 skin.html 화면에서
<link href="./style.css" rel="stylesheet" type="text/css" /> 문장을 찾을 수 있다. 앞에서 대략 대여섯줄 근방에 있다. 이 문장 뒤에 다음 문장을 추가한다.
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>

그 다음 옆의 슬라이드 바를 끝까지 내리면
</s_t3>
</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>

여기서 소스예를 Python으로 들기 때문에 class 항목에 Python을 적었고, 다른 언어일 경우는 해당 언어를 지정하면 된다. C++, C#, Delphi, Java, PHP, Python, Ruby, VB, HTML, XML 등을 지원한다.
또한 rows 항목은 굳이 소스에 딱 맞게 지정할 필요는 없다. 적절히 크기 넣어주면 알아서 소스에 번호를 붙인 후 소스 끝에서 깔끔하게 마무리를 해 준다.

아래 예가 이 방법으로 wxPython 코드를 블로그에 붙여넣은 예이다. 예전과는 비교도 안되게 깔끔해졌다. 부수적으로 얻을 수 있는 기능은 상단에 조그마하게 copy to clipboard 메뉴가 있는데 이를 클릭하면 소스 코드가 깔끔하게 클립보드로 복사된다. 굳이 소스를 마우스로 긁을 필요가 없다.

view plaincopy to clipboardprint?

1. #!/usr/bin/env python  
2. # -*- coding: cp949 -*-  
3. """11-5 Combo box: pull-down choice """ 
4.  
5. # http://withrobot.tistory.com  
6. # 2007.12.05  
7.  
8. import wx  
9.  
10. class Frame(wx.Frame):  
11.     def __init__(self, parent=None, id=-1, title='Combo Box'):  
12.         wx.Frame.__init__(self, parent, id, title, size=(300,300), pos=(100,100) )  
13.         panel = wx.Panel(self)  
14.         sampleList = ['zero', 'one', 'two', 'three', 'four', 'five','six', 'seven', 'eight']  
15.  
16.         self.st = wx.StaticText(panel,-1,"Select one:",(15,20))  
17.         wx.ComboBox(panel,-1,"선택하세요",(15,40),(100,50),sampleList,wx.CB_DROPDOWN)  
18.         wx.ComboBox(panel,-1,"선택하세요",(150,40),(100,50),sampleList,wx.CB_SIMPLE)  
19.           
20. class App(wx.App):  
21.     def OnInit(self):  
22.         self.frame = Frame()  
23.         self.frame.Show()  
24.         return True 
25.  
26. def main():  
27.     app = App()  
28.     app.MainLoop()  
29.  
30. if __name__ == '__main__':  
31.     main()