kkamagui의 작업실

 아아~ 이거 힘드네요. ㅜ_ㅜ 일단 RSS를 통해 티스토리에서 댓글만 뽑아내려고 했는데, 잘 안되서 파이썬으로 파싱하는 걸로 방향을 바꿨습니다. 파이썬 라이브러리 중에 Beautiful Soup를 사용해서 간단히 파싱하여 댓글을 추출하는 것까지는 금방했습니다.

 그런데 문제는 UTF-8로 인코딩된 웹페이지를 파일로 저장하려니 ASCII로 저장하는 것이 기본인지 저장할 수 없다는 에러가.... 이렇게 황당한 일이... ㅡ_ㅡa... 파이썬을 쓰면서 한글 처리를 별로 안해서 크게 불편함을 몰랐는데, 이번에 제대로 걸렸네요. ㅜ_ㅜ

 이래 저래 해보다가 결국 포기 ㅜ_ㅜ)/~ 차라리 티스토리에 웹페이지를 하나 더 넣어서 댓글만 표시하게 하는게 더 편하겠습니다. ㅜ_ㅜ)/~

 댓글 추출하는 소스는 만든게 아까워서 올려놓습니다. 애휴... 밥이나 먹어야겠군요. ㅜ_ㅜ)/~

# -*- coding: cp949 -*- import urllib import BeautifulSoup if __name__ == "__main__": # 메인 코드 urlHandle = urllib.urlopen( "http://kkamagui.tistory.com" ); buffer = urlHandle.read(); soup = BeautifulSoup.BeautifulSoup( buffer ); soup.prettify(); ul = soup.findAll( 'ul', {"id" : "recentComments"} ); recentComments = ul[0]; recentComments = recentComments.findChildren( 'li' ); print recentComments


 ps) 아아... 이게 무슨 삽질인지... 쉽게 처리하는 방법을 아시면 댓글로 제보 부탁드립니다.

 오늘 블로그 스킨을 바꾸고 나니 다른 것은 그럭저럭 마음에 드는데, 사이드바와 본문의 위치가 마음에 들지 않았습니다. 스킨 위저드에서 사이드바와 본문의 위치를 바꾸는 항목은 없더군요. 그래서 스킨 편집의 HTML/CSS 수정으로 가서 style.css 파일을 조금 손봤습니다.

 의외로 아주 간단하게 되어있더군요. 아래의 소스코드에서 content와 .sidebar 항목의 left와 right만 바꾸면 원하는 위치에 본문과 사이드바를 둘 수 있습니다.
/* 블로그 레이아웃 */ #container { margin:0 auto; margin-top:0px; margin-bottom:0; //background:url(images/bg4.jpg); } #container .inner { padding-bottom:40px; 0 0 no-repeat; padding:40px 5px 0 5px;} #container .inner2 { no-repeat left bottom; padding-bottom:0px;} #header { // Blog 맨 위에 들어가는 설명 padding:0 10px 0 20px; background-color:#7870ab; color:#000000; text-align:center; } #content { float:left; <== 여기를 left or right로 수정합니다. ^^ width:/*@post-width:-30=*/ 670px /*@*/; overflow:hidden; margin:0 20px 0 0; } .sidebar { float:left; <== 여기를 left or right로 수정합니다. ^^ width:166px; overflow:hidden; margin-left:12px; }
 content는 본문의 위치를 나타내고 .sidebar는 사이드바의 위치를 나타냅니다. ;)
 진작 바꿀껄~ 괜히 마음 고생만 했네요 ^^)/~

얼마전부터 구글 문법 하일라이터(Syntax Highlighter)를 티스토리에 적용해서 사용하고 있습니다. Syntax Highlighter에 대한 내용은 http://kkamagui.tistory.com/notice/28 에서 볼 수 있습니다. 이것을 사용하면 코드가 예쁘게 나오는 것은 물론이고 붙여넣기 및 출력도 지원하기때문에 상당히 편리한데, 문제가 하나 있습니다.

티스토리만 사용한다면 큰 문제가 안되겠지만 저같이 스프링노트와 티스토리를 같이 사용하는 사람에게는 거의 무용지물입니다. 개발하면서 주로 로그를 남기고 코드를 붙여넣는 것은 티스토리가 아니라 스프링노트쪽이고, 티스토리는 개발이 완료되었을 때 스프링노트의 보내기 기능을 써서 포스팅합니다.

이렇게 되면 스프링노트가 코드를 보낼 때 아래와 같이 OL 태그를 써서 보내게 되는데, 그 안에는 각종 HTML 태그들과 함께 인코딩된 형태로 코드가 뒤섞여있습니다.

<OL class=code>  
<LI>&lt;textarea name="code" class="cpp" cols="60" rows="10"&gt;<br />... some code here ...<br />&lt;/textarea&gt;<br /></LI></OL>

Syntax Highlighter를 사용하려면 TEXTAREA 태그나 PRE 태그를 사용해야하는데, OL 태그를 단순히 TEXTAREA 또는 PRE 태그로 교체하면 HTML 코드와 실제 내용이 어우러지는 아주 아름다운 코드를 보게 됩니다. ㅡ_ㅡ;;;;;;

그래서 어제부터 Syntax Highlighter의 소스를 고쳐보려고 자바스크립트를 공부하기 시작했는데, 너무 코드가 어려워서 포기했다가 강규영 님의 도움을 받아 해결했습니다(강규영님께 감사드립니다. ^^).

수정할 부분은 크게 두가지인데, 한가지는 shCore.js 파일을 수정하는 것입니다. shCore.js 파일의 내용중에 아래 부분을 간단히 수정한 뒤, "관리"의 "HTML/CSS 소스보기"로 가서 수정된 shCore.js 파일을 올리기만 하면 됩니다.

 ... 생략 ...

 // 기존 코드
 FindTagsByName(elements, name, 'pre');
 FindTagsByName(elements, name, 'textarea');

 // kkamagui 추가, 아래 부분을 추가해 줍니다.
 FindTagsByName(elements, name, 'ol');

 ... 생략 ...

 // 기존 코드
 //highlighter.Highlight(element\[propertyName\]);
 // 수정된 코드
 highlighter.Highlight(element\[propertyName\].replace( /<br>/gi, '\\n').replace(/<\\/?\[^>\]+>/gi, ''));
 ... 생략 ...

위의 코드가 나오는 부분은 한군데 밖에 없으니 원본 파일은 백업하시고 과감히 수정하시면 됩니다.
이제 남은 것은 스프링노트에서 보낸 글을 약간 손보는 것입니다. 스프링노트에서 보낸 글을 선택하여 수정모드로 갑니다. 수정모드에서 아래에서 보는 것과 같이 좌측 상단에 있는 "EDIT" 버튼을 눌러서 HTML 편집 모드로 변경합니다.

그후 "OL class=code" 를 찾아서 "OL name=code class=cpp" 와 같은 형식으로 수정합니다.

그리고 저장 버튼을 누른 후 해당 페이지로 이동해서 Control + F5를 눌러 캐쉬된 내용과 관계없이 화면을 갱신하면 아래와 같이 Syntax Highlight가 적용된 코드를 볼 수 있습니다. ^^

수정한 shCore.js 파일을 첨부해 놓았으니 필요하신 분은 다운 받아서 바로 적용하시면 됩니다. 문제를 해결할 수 있게 도움을 주신 강규영 님께 거듭 감사드립니다. ^ㅡ^)/~

ps) 아래는 shCore.js 파일입니다.