Generic Syntax Highlighter 를 tistory 에 적용해보자

GeSHi - Generic Syntax Highlighter

GeSHi 는 알만한 분들은 다 알 것이다.
뭐 보면, 계정을 구입하고, 태터툴즈를 사용하는 고급유저들은 플러그인을 설치하면 된다지만, 그외 입주형 블로그를 사용하는 다른 분들(나 포함)은 문법 하이라이터(코드 컬러링 이라고도...)를 사용하기가 어렵다.
그런데, 가만, 보니, GeSHi 사이트의 운용 방식이 지금 그대로 유지된다면, 약간의 노가다로서 가능하리라는 희망이 보이기 시작했다.
혹시, 나와 같은 작업을 할 사람들을 위해 이 내용을 블로그에 적는다.
더 쉬운 방법 있으면 서로 좋은게 좋은것이니 좀 알려주시길....
사실은, 내가 이 방법 까먹을 까봐 써 놓는 것임...

1. 하이라이트는 GeSHi 홈페이지가 해 준다.
2. 해당 사이트는 소스보기를 막아놓지 않은 건전한(?) 사이트이다.
3. 각각의 언어별 CSS(스타일시트)를 페이지 서두에 깔끔하게 정리하여 넣어두었다.
4. 파이어폭스에서는 드래그하여 "선택소스보기"를 지원한다.
5. 티스토리는 CSS 개별 편집을 지원한다.

자, 이제 된다.
우선, CSS 편집기에,
내가 주로 사용하는 CPP, T-SQL, C#(이건 잘 모름) 에 대한 CSS 스크립트를 모았다.
내 구미에 맞게 약간의 편집이 들어갔다. 글자 사이즈, 배경색 등등...

/* CPP :: GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.cpp .de1, .cpp .de2 {color: #000060; font-weight: normal;}
.cpp  {white-space: nowrap;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 95%; background-color: #fafafa; margin: 0; line-height: 110%; padding: 0;color: #000099;}
.cpp a:link {color: #006;}
.cpp a:hover {background-color: #d6d6e6;}
.cpp .head {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;}
.cpp .foot {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;}
.cpp .imp {font-weight: bold; color: red;}
.cpp li {font-family: 'Courier New', Courier, monospace; color: #000060; background-color: #e0e0e0; padding-bottom: 2px;}
.cpp .kw1 {color: #0000ff;}
.cpp .kw2 {color: #0000ff;}
.cpp .kw3 {color: #0000dd;}
.cpp .kw4 {color: #0000ff;}
.cpp .co1 {color: #ff0000;}
.cpp .co2 {color: #339900;}
.cpp .coMULTI {color: #ff0000; font-style: italic;}
.cpp .es0 {color: #666666; font-weight: bold;font-weight: normal;}
.cpp .br0 {color: #000000;}
.cpp .st0 {color: #666666;}
.cpp .nu0 {color: #0000dd;}
.cpp .me1 {color: #00eeff;}
.cpp .me2 {color: #00eeff;}
.cpp .me {1}

/* T-SQL :: GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.tsql .de1, .tsql .de2 {color: #000060; font-weight: normal;}
.tsql  {white-space: nowrap;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 95%; background-color: #fafafa; margin: 0; line-height: 110%; padding: 0;color: #000099;}
.tsql a:link {color: #006;}
.tsql a:hover {background-color: #d6d6e6;}
.tsql .head {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;}
.tsql .foot {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;}
.tsql .imp {font-weight: bold; color: red;}
.tsql li {font-family: 'Courier New', Courier, monospace; color: #000060; background-color: #e0e0e0; padding-bottom: 2px;}
.tsql .kw1 {color: #0000FF;}
.tsql .kw2 {color: #FF00FF;}
.tsql .kw3 {color: #AF0000;}
.tsql .kw4 {color: #AF0000;}
.tsql .co1 {color: #008080;}
.tsql .coMULTI {color: #008080;}
.tsql .es0 {color: #000099; font-weight: bold;font-weight: normal;}
.tsql .br0 {color: #808080;}
.tsql .st0 {color: #FF0000;}
.tsql .nu0 {color: #000;}
.tsql .me1 {color: #202020;}
.tsql .me2 {color: #202020;}
.tsql .me {1}

/* C# :: GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */
.csharp .de1, .csharp .de2 {color: #000060; font-weight: normal;}
.csharp  {white-space: nowrap;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 95%; background-color: #fafafa; margin: 0; line-height: 110%; padding: 0;color: #000099;}
.csharp a:link {color: #006;}
.csharp a:hover {background-color: #d6d6e6;}
.csharp .head {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;}
.csharp .foot {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;}
.csharp .imp {font-weight: bold; color: red;}
.csharp li {font-family: 'Courier New', Courier, monospace; color: #000060; background-color: #e0e0e0; padding-bottom: 2px;}
.csharp .kw1 {color: #0600FF;}
.csharp .kw2 {color: #FF8000; font-weight: bold;}
.csharp .kw3 {color: #008000;}
.csharp .kw4 {color: #FF0000;}
.csharp .kw5 {color: #000000;}
.csharp .co1 {color: #008080; font-style: italic;}
.csharp .co2 {color: #008080;}
.csharp .coMULTI {color: #008080; font-style: italic;}
.csharp .es0 {color: #008080; font-weight: bold;font-weight: normal;}
.csharp .br0 {color: #008000;}
.csharp .st0 {color: #808080;}
.csharp .nu0 {color: #FF0000;}
.csharp .me1 {color: #0000FF;}
.csharp .me2 {color: #0000FF;}
.csharp .me {1}

이제 준비는 끝났다.
글을 쓸 때, HTML 편집 모드로 글을 쓴다.
이런저런 멘트는 앞뒤로 미리 적어주면, 위치를 잘 잡을 수 있다.
코드 들어갈 부분에 다음과 같이 써 준다.

<!-- div 열어준다. 시작 -->
<div class="tsql"> 또는
<div class="csharp"> 또는
<div class="cpp"> 등등 원하는 내용. class 는 css 파일에 정의가 되어 있어야지...
<!-- div 열어준다. 종료 -->

------ COPY 해 오는 부분 ------
<ol><li class="li1">
어쩌고 저쩌고 내용들이 들어감
</li></ol>
------ COPY 해 오는 부분 ------

<!-- div 닫아준다. 시작 -->
</div>
<!-- div 닫아준다. 종료 -->

그 다음, GeSHi 사이트에 가서 내가 작성할 코드를 highlight 해 준다.
그 다음 복사해서 붙여넣을 소스코드를 드래그한다.
파이어폭스의 좋은 기능인 오른쪽 버튼->"선택된 소스"를 클릭해서 소스를 보고,
<ol><li class="li1">~~~~~~~~~~</li></ol>
를 복사해 와서 붙여넣으면 완료.
좀 노가다성이지만, 그럭저럭... 뭐... 흠...

GeSHi 사이트가 망가지면 낭패... 흐음...