블로그팁: 티스토리에서 Google Syntax Highlighter 사용하기

블로깅을 하면서 Syntax Highlighter(code highlighter)를 사용할 일이 제법 많이 있습니다.
C/C++/C# 소스를 올리는 경우도 있고, HTML 소스나 css 설정을 올리는 경우도 있습니다.
물론, XML 소스를 올리는 경우도 있습니다.

태터툴즈를 사용하시는 분들은 CodeHighlight Plug-in을 사용하면 됩니다만,
티스토리에서는 이 플러그인을 지원하지 않습니다.

방법을 뒤지던 중 Google Code project로 개발된 Syntax Highlighter가 있다는 것을 알았습니다.
하루 동안의 삽질 끝에 이걸 티스토리에 적용할 방법을 알아냈습니다.
(위의 태터툴즈용 플러그인도 이 Google의 Highlighter를 활용한 것입니다)

Google Syntax Highlighter

이 코드는 순수하게 javascript로 작성되어 있기 때문에 설정을 하고 나면 아주 간편하게 사용할 수 있습니다.
속도가 약간 느리다는 약점이 있습니다만…

이것을 설치, 활용하는 절차는 아래와 같습니다.


1. Syntan Highlighter (이하 SH) 다운로드

SH에서 다운로드 가능합니다. : 클릭
현재 1.51까지 나와있습니다. : 다운로드


2. 필요한 파일 모으기

관련된 파일들(*.js, SyntaxHighlighter.css, clipboard.swf)를 한 폴더에 저장해야 합니다.
다운받은 SyntaxHighlighter_1.5.1.rar 파일의 압축을 풀면 dp.SyntaxHighlighter 아래에 Scripts, Styles, Uncompressed 폴더가 있습니다.

dp.SyntaxHighlighter - Scripts/Styles/Uncompressed

Scripts 폴더와 Uncompressed 폴더에는 같은 내용의 함수 파일들이 들어있는데, Uncompressed 폴더의 함수들이 사람이 읽기에 좀 더 편합니다. 설치할 때는 이 중에서 Scripts의 내용만 사용합니다.

폴더를 하나 만든 뒤에 Scripts 폴더에 있는 모든 파일들(*.js 13개, clipboard.swf)과 Styles 폴더에 있는 SyntaxHighlighter.css 파일을 몽땅 저장합니다.
이 때 별도의 서브 폴더를 만들 필요 없이 그냥 저장하면 됩니다.

위 화면은 c:\_sh_\ 폴더를 만들어서 필요한 파일을 저장한 화면입니다.


3. 파일 업로드

2번에서 c:\_sh_ 폴더에 저장한 파일 15개를 전부 업로드합니다.
업로드할 때는 스킨 메뉴에서 직접올리기 기능으로 업로드하면 됩니다.

티스토리는 파일을 업로드하면 핵심 파일들을 제외하면 모두 images 폴더에 저장합니다.
위의 화면에서 sh*.js 파일들이 images 폴더에 저장되어 있는 것을 확인할 수 있습니다.


4. 스킨파일(skin.html) 수정

티스토리에서 Google Code - Syntax Highlighter를 사용하려면 해당 javascript 코드를 스킨파일에 추가해야 합니다.
추가할 위치는 </body> 바로 앞입니다. 맨 앞에 집어넣으면 아무런 변화도 없습니다.

<!-- google code for syntaxhighlight -->
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
<script language="javascript" src="./images/shCore.js"></script>
<script language="javascript" src="./images/shBrushCSharp.js"></script>
<script language="javascript" src="./images/shBrushXml.js"></script>
<script language="javascript" src="./images/shBrushCss.js"></script>
<script language="javascript" src="./images/shBrushCpp.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- google code for syntaxhighlight -->
</body>
</html>

이 코드는 Google SH - Usage에서 제시하는 코드와 약간 차이가 있습니다.
3번에서 언급한 저장 위치문제 때문에 폴더를 ./images/로 수정해야 합니다.

사용할 모든 언어를 다 정해도 되지만, 사용할 것만 올리면 조금이라도 가벼워집니다.
위에서는 C#, XML(HTML), CSS, C++ 용 js 파일만 삽입했습니다.

지원 가능한 언어는 Google SH - Languages를 참고하면 됩니다.


5. 코드의 삽입

해당 코드의 앞뒤에 <pre> 태그만 붙여주면 됩니다.

<pre name="code" class="html">
... some code here ...
</pre>

형식으로 코드를 삽입하면 됩니다.
< > 등의 문자는 &lt; &gt; 등의 코드로 입력해야 하므로 기본적인 입력은 WYSIWYG으로 하면 편합니다.
하지만, 자동으로 입력된 </br> 태그를 삭제해야 하므로 마무리는 HTML 모드로 해줘야 합니다.


6. 기타사항

<pre> 태그에 옵션을 추가해서 모양을 조절할 수 있습니다.
사용 가능한 옵션은 nogutter, nocontrols, collapse, firstline[value], showcolumns의 다섯 가지가 있으며, 콜론(:)으로 구분하고 여러 개의 옵션들을 붙여서 사용할 수 있습니다.
※ 위의 코드는 nogutter 옵선을 사용해서 행번호를 표시되지 않도록 했습니다.

더 자세한 사용법은 Google SH - Configuration을 참고하시기 바랍니다.

※ 기능을 보완하고 설치 과정을 수정했습니다. Code Highlighter 더 쉽게 사용하기를 읽어주세요

블로그팁: 추가된 사이드바를 기본 사이드바와 같은 모양으로 만들기

사이드바의 아이템들은 유사한(대부분 똑같은) 모양으로 디자인되어 있습니다.
태그와, 트랙백, Link 등은 대부분의 테마에서 유사한 모양을 하고 있습니다.

그런데, 플러그인을 통해서 추가한 아이템은 디자인이 다릅니다.
오른쪽 화면에서 보듯이 말이죠.
(오른쪽 화면의 테마는 제가 쓰고 있는 화이트테마 입니다)

화면에 보이는 Link부터 위로(보이지 않는) 트랙백, 태그 등은 모양이 똑같은데, 추가한 이올린 추천글과 이올린 최신글은 모양이 다릅니다.

이런 경우에 디자인을 정리하려면 태그 입력기 플러그인을 사용하면 됩니다.
추가 절차는 아래와 같습니다.

1. 새로운 스타일 추가

새로 추가한 아이템들에 적용할 스타일을 만들어 style.css에 추가합니다.

제가 사용하기로 한 스타일은 트랙백 스타일입니다.
원본 스타일은 아래와 같습니다.

/* recentTrackback */
#recentTrackback { border: 1px solid #ececec; margin-top: 10px; }
#recentTrackback ul { padding: 0; list-style: none; margin: 10px;}
#recentTrackback li { list-style: none; line-height: 1.4; }
#recentTrackback h3 { width: 170px; padding: 3px 0; margin: 5px auto;
  font-family: Verdana; font-size: 11px; font-weight: normal;
  color: #666; border-bottom: 1px solid #f5f5f5;}
#recentTrackback li .info { color: #999; }

이 스타일을 복사한 뒤, 아주 약간 바꿔서 새로운 스타일(sidebaraddons)을 만듭니다.

/* sidebaraddons : added by bluenlive */
#sidebaraddons { border: 1px solid #ececec; margin-top: 10px; }
#sidebaraddons ul { padding: 0; list-style: none; margin: 10px;}
#sidebaraddons li { list-style: none; line-height: 1.4; }
#sidebaraddons h3 { width: 170px; padding: 3px 0; margin: 5px auto;
  font-family: Verdana; font-size: 11px; font-weight: bold;
  color: #666; border-bottom: 1px solid #f5f5f5;}
#sidebaraddons li .info { color: #999; }

제목(h3)만 font-weight를 normal에서 bold로 바꿨습니다.


2. 플러그인 추가

스타일을 적용할 아이템(이올린 추천글, 이올린 최신글) 위와 아래에 태그 입력기::Replacer를 추가합니다.

이 플러그인은 해당 위치에 강제로 HTML 코드를 삽입할 수 있게 해줍니다.

적용할 아이템 위와 아래에 있는 Replacer에서 sidebaraddons 스타일을 사용하도록 설정하면 작업은 끝납니다.

맨 위에 있는 Replacer의 편집 버튼을 클릭해서 <div id="sidebaraddons">라고 입력하고 엔터를 누릅니다.
두번째는 </div><div id="sidebaraddons">, 세번째는 </div>를 마찬가지로 입력합니다.

---

작업을 마친 결과 화면은 다음과 같습니다. 원래 화면보다 기존의 아이템들과 잘 어울립니다.
제목은 의도적으로 두껍게(bold 적용) 만들어서 약간 다른 느낌을 주도록 했습니다.

블로그팁: 특정 카테고리의 글에만 원하는 내용을 추가하기

QAOS.com 시삽님의 배려로 블로그 본문 맨 위쪽에 QAOS의 최신 정보를 올려두었습니다.
정말 좋은 정보이지만, 컴퓨터와 관련이 없는 글을 볼 때도 올라와있는 것이 다소 어색해보였습니다.

QAOS의 최신 팁들 (4줄 위에 있는 제목 바로 위에 있는 것입니다)

그래서 컴퓨터 관련 카테고리에서만 이 정보를 띄우는 방법을 찾았습니다.
특정 카테고리에서만 원하는 내용을 출력하려면 태터툴스 치환자와 javascript를 함께 사용해야 합니다.

일단, 위의 정보를 출력하기 위한 코드는 아래와 같습니다.

※ 이 코드는 공식적으로 배포된 코드가 아니기 때문에 주소는 지웠습니다.

태터툴즈(및 태터 기반의 티스토리)에서는 치환자를 이용해서 각종 제어가 가능합니다.
이 중 카테고리의 치환자는 [##_article_rep_category_##]입니다.

제 블로그의 카테고리중 컴퓨터 관련 사항은 모두 컴퓨터야그 카테고리 아래에 들어있습니다.
즉, 치환자를 통해 카테고리를 읽어내어 컴퓨터로 시작하는 경우에만 위의 코드를 출력하도록 하면 되는 것입니다.

그렇게 수정된 코드는 아래와 같습니다.

여기서 주의할 점은 아래와 같습니다.

1. [##_article_rep_category_##] 치환자는 s_article_rep/entry 내부에서만 동작함
   동작 여부는 alert("[##_article_rep_category_##]"); 코드로 미리 확인해야 합니다.
   
   
2. document.write로 코드 출력시 태그 문자(" ' /)는  모두 역슬래쉬(\)를 붙일 것
   스크립트 코드를 출력하는 경우(</script>가 있음)는 브라우저 별로 해석하는 방법이 다릅니다.
   
   
3. 작업이 종료될 때 까지 원래의 코드는 주석처리하고 지우지 말 것

이렇게 하면 모든 작업이 끝나는 줄 알았습니다만…
IE7에서는 문제가 발생합니다. 아래와 같이 비정상적으로 출력됩니다.

허걱! 빌 형 왜이러오…

내부의 스크립트 실행 결과는 일정 내용을 출력해서 HTML에 끼워넣는 것인데, 여러모로 검토해본 결과 IE가 이 끼워넣는 작업을 javascript 실행 종료 이후에 하는 것이 문제의 원인임을 확인했습니다.

즉, <fieldset>~</fieldset> 태그 사이에 집어넣도록 만들었는데, </fieldset> 뒤에다 붙이도록 동작하는 것입니다.

(이건 명백히 IE7의 버그입니다)

이 문제를 해결하려면 위의 코드를 둘로 쪼개서 해결해야 합니다.
이 문제가 해결된 코드는 아래와 같습니다.

아래와 같이 IE에서도 FF와 같이 정상적으로 출력되는 것을 확인할 수 있습니다.