철없는 강아지의 오리지널

자료검색차 블로그를 읽다보면,
소스코드를 이쁘게 보여주는 블로그가 많이 있습니다.

블로그도 새로 시작하는데,
이참에 강아지도 그렇게 이쁜게 소스코드를 보여주고 싶어서 여기저기 찾아 보았는데요,
이~쁜 소스코드의 정체는 syntaxhighlighter 라는 녀석이었습니다.

잽싸게 다운 받아 설치하고, 시험해보려하니,,, 대략 난감 이었습니다.

<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>  
<!--     At least one brush, here we choose JS. You need to include a brush for every
      language you want to highlight -->
<script type="text/javascript" src="css/shBrushJScript.js"></script>  
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" /> 
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" /> 

위와 같은 include 들은 skin.html을 편집하면 되겠는데,
문제는 사용법입니다.

 function foo() 
{ 
} 
 

소스코드를 표시할 때마다, 이런 구문을 사용해야 적용이 된다는데요,
TTML편집기에서 저런 구문을 사용하면 HTML 태그를 편집기가 바꾸어 버리는 바람에 사용할 수 없게 되버렸습니다.

좀더 리서칭을 해보니, HTML편집기를 이용하면 가능하다고 하는군요.
그런데, 강아지는 HTML편집기는 사용하고 싶지 않습니다.
HTML편집기가 후저서라기 보다는 TTML편집기가 너무 좋아서(?) 이겠지요.

여하튼, TTML편집기에서도 syntaxhighlighter를 사용하고 싶어서
이번엔 textcude를 검색해 보았더니,
역시나 선배님들이 플러그인을 만들어 놓으셨더군요.

감사한 마음에 플러그인을 낼름 받아다 설치해 보았습니다.
<pre> 태그 대신에 [code]를 입력하면 되는 방식 이었습니다.
(it's awesome!! how smart is it!!)

헉!! 이.럴.스.가......
플러그인에 적용된 syntaxhighlighter가 전부 이전 버전이여서, 못생기게 나옵니다.(ㅜㅜ)

다른 블로그들을 보면 줄번호도 나오고, 바탕도 노트같이 이쁘고 막 그러는데,
얘네들은 회색 바탕에 줄번호도 없이 기냥 쭉~~~ 소스코드를 뱉어내고 있습니다....

에혀~ 역시 강아지는 한방에 잘되는 경우가 없습니다.
선배님들의 플러그인을 대충 컨닝해서 플러그인을 만들기로 했습니다.

흠... 잘 동작 하는 군요.
대충대충 막 코딩해서 자잘한 오류가 있겠지만서도,
강아지가 혼자 사용하니 맞추어 가면서 사용할랍니다.
(아이고 이뻐라~~~ ㅋㅋㅋㅋ)

※ 나중에 시간을 내서 잘 다듬어진 플러그인을 배포하도록 하겠습니다. ^^
※ 다듬을 시간이 안될 것 같습니다. 대충 받아서 사용하세요.(혹시나 사용법 문의는 댓글이나 트위터로...)
※ 블러시 타입은 여기를 확인하세요. ^^