티스토리 블로그의 소스코드 구문강조하기 (Syntax highlight)

티스토리에 개발 관련 포스팅을 하다 보니.. 글에 소스코드를 넣어야 하는 경우가 많은 거 같다.

기왕 넣는 거 그럴 듯해 보이게 넣는 방법을 찾아보니 Syntax highlighter라는 것이 있다.

Syntax highlighter를 이용하면 소스코드 에디터에서 보는 것과 같이 소스코드가 구문강조되어 표현된다. 좋은 듯하다.

방법은 다음과 같다.

1. 아래 링크에서 Syntax highlighter를 다운받는다.

http://alexgorbatchev.com/SyntaxHighlighter/download/ 에 접속해서 "Click here to download"를 클릭해서 파일을 다운로드한다.

2. 다운로드한 파일의 압축을 푼다.

압축을 풀면 여러 개의 폴더와 파일들이 있는데, 결론적으로는 scripts 폴더에 있는 *.js 파일들과 styles 폴더에 있는 *.css 파일들을 티스토리 블로그에 업로드하면 된다.

3. *.js 파일들과 *.css 파일들을 티스토리 블로그에 업로드한다.

티스토리 블로그의 관리 메뉴로 들어가서 꾸미기 메뉴에서 HTML/CSS 편집 메뉴를 선택한다. 그러면 웹브라우저 화면이 분할되면서 오른쪽 화면에서 HTML 소스코드를 확인할 수 있게 된다.

상단의 파일업로드 탭을 클릭하면 현재 블로그에 업로드되어 있는 파일들의 리스트를 확인할 수 있다.

아래 쪽의 추가 버튼을 클릭해서 위에서 다운로드 받은 자바스크립트 파일들(scripts/*.js)과 CSS파일들(styles/*.css)을 모두 업로드한다.

업로드가 완료되면 저장 버튼을 클릭해서 저장한다.

4. 블로그 페이지의 HTML 코드를 수정하여 Syntax Highlighting 기능을 추가한다.

다시 상단의 HTML 탭을 클릭하여 HTML 코드 편집 화면으로 전환한다.

아래의 HTML 코드를 블로그 페이지 HTML 코드의 제일 아랫 부분 </body> 태그와 </html> 태그 사이에 추가한다.

• 아래의 HTML 코드는 3번 절차에서 업로드한 모든 *.js 파일을 추가하고 있으며, *.css 파일은 shCore*로 시작되는 모든 파일을 추가하고 있다. 

• 3번 절차에서 업로드된 파일들의 리스트를 보면 images 폴더 밑에 파일들이 존재하는 것을 알 수 있으므로, 각 파일의 src는 ./images/*로 명시한다.

• 마지막의 shThemeMidnight.css는 내가 좋아하는 스타일이라서 선택한 것이고, 만약 다른 스타일로 바꾸려면 ShTheme*.css 파일 중 자신이 원하는 스타일의 css파일로 변경하면 된다.  http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/에 가 보면 각 스타일을 미리 확인할 수 있다.

• 또한 *.js 파일들을 추가할 때 되도록 shCore.js와 shLegacy.js 파일을 추가하는 구문을 다른 js파일들(ShBrush*.js)을 추가하는 구문의 위 쪽에 두는 것이 좋다. 

<script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shLegacy.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script> <script type="text/javascript" src="./images/shBrushAppleScript.js"></script> <script type="text/javascript" src="./images/shBrushAS3.js"></script> <script type="text/javascript" src="./images/shBrushBash.js"></script> <script type="text/javascript" src="./images/shBrushColdFusion.js"></script> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <script type="text/javascript" src="./images/shBrushCSharp.js"></script> <script type="text/javascript" src="./images/shBrushCss.js"></script> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <script type="text/javascript" src="./images/ShBrushDiff.js"></script> <script type="text/javascript" src="./images/shBrushErlang.js"></script> <script type="text/javascript" src="./images/shBrushGroovy.js"></script> <script type="text/javascript" src="./images/shBrushJava.js"></script> <script type="text/javascript" src="./images/shBrushJavaFX.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shBrushPerl.js"></script> <script type="text/javascript" src="./images/shBrushPhp.js"></script> <script type="text/javascript" src="./images/shBrushPlain.js"></script> <script type="text/javascript" src="./images/shBrushPowerShell.js"></script> <script type="text/javascript" src="./images/shBrushPython.js"></script> <script type="text/javascript" src="./images/shBrushRuby.js"></script> <script type="text/javascript" src="./images/shBrushSass.js"></script> <script type="text/javascript" src="./images/shBrushScala.js"></script> <script type="text/javascript" src="./images/shBrushSql.js"></script> <script type="text/javascript" src="./images/shBrushVb.js"></script> <script type="text/javascript" src="./images/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="./images/shCore.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreDjango.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreEclipse.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreEmacs.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreFadeToGrey.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreMDUltra.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreMidnight.css"> <link type="text/css" rel="stylesheet" href="./images/shCoreRDark.css"> <link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css"> <script type="text/javascript"> SyntaxHighlighter.all(); </script>

5. 여기까지 했으면 설정은 완료.

6. 블로그에 글쓰기를 해 본다.

쓰고 싶은 글을 끄적거린 후, HTML 편집모드로 변환한다.(HTML 체크박스 선택)

포스팅하고자 하는 소스코드를 다음과 같은 방법으로 적는다.

• 즉, <pre class="brush: c">와 </pre> 태그 사이에 존재하는 소스코드들은 C 언어와 관련된 구문강조가 적용된다.
• C 언어가 아닌 다른 언어의 경우에는 brush: 뒤에 해당되는 언어를 적어 주면 된다. (예: <pre class="brush: js"> </pre>)

<pre class="brush: c"> #include <stdio.h> int main(int argc, char *argv[]) { printf("Hello world\n"): return 0; } </pre>

그런데 글쓰기 완료 후 포스트를 확인해 보면 먼가 이상하다. 뒷 부분에 </stdio>라는 부분이 추가되어 있다.

안타깝게도 "<" 기호와 ">" 기호는 HTML 태그로 인식하기 때문에... 해당 기호들은 아래처럼 각각 "&lt;", "&gt;"로 직접 변경해 주어야 한다. ㅜㅜ

<pre class="brush: c"> #include &lt;stdio.h&gt; int main(int argc, char *argv[]) {     printf("Hello world\n"):     return 0; } </pre>

변경 후 확인해 보면 성공.

요 아래가 바로 이 포스트에 구문강조되어 삽입된 소스코드. 아름답다...

#include <stdio.h>
int main(int argc, char *argv[])
{
    printf("Hello world\n"):
    return 0;
}

주의사항: 티스토리 관리 메뉴에서 스킨을 변경하면 초기화된다.... (블로그 웹페이지에 업로드한 *.js, *.css파일들 및 추가한 HTML 코드가 사라진다...)