Syntax Highlighter가 3.x 대가 되었습니다. 티스토리에서 이 버전을 사용해서 Syntax Highlight 기능을 사용하는 방법을 알아보겠습니다.
1. 설정하기
먼저 티스토리 관리자 화면의 [스킨 - HTML/CSS편집] 메뉴로 이동합니다. 두개의 커다란 텍스트 상자 중에서 skin.html의 텍스트 상자에서 작업을 합니다.
먼저 </title> 부분을 찾아서 바로 다음에 다음을 입력합니다.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
첫번째 줄은 테마를 지정하는 부분입니다. 현재는 Emacs 테마로 지정되어있습니다. http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 의 표를 보시고 마음에 드는 테마의 파일 명을 shThemeEmacs.css 대신 써주시면 됩니다. 예를 들어 Midnight 테마가 마음에 든다면, 위의 첫번째 부분을
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" />
으로 바꾸시면 됩니다.
4-6번줄은 지원하는 언어를 지정하는 부분입니다. 현재는 Python, Bash, Javascript를 지정해두었습니다. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 를 참고 하셔서 필요한 언어를 추가하시면 됩니다.
다음으로 거의 아래쯤의 </body>를 찾아서 바로 위에 다음을 입력합니다.
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
2. 사용하기
이제 표시할 소스를 사용하는 방법입니다. 소스에 해당하는 부분을 <pre> 태그로 감싸주어야 합니다. (<script>를 사용하는 방법도 있지만 이 부분은 http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 를 참고하시기 바랍니다.) 먼저 티스토리의 글 작성 화면에서 우측 상단의 HTML 체크박스를 체크하면 화면이 HTML 편집화면으로 이동합니다. 해당 소스를 다음과 같이 <pre> 태그로 감쌉니다.
<pre class="brush: python"> print 'hello, world' </pre>
brush: python 부분이 언어를 지정하는 부분입니다. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 을 참고 하시면 됩니다.
주의 하실점은 소스를 입력할 때 <를 <로 바꾸어야 한다는 점입니다.
그럼 다음과 같은 화면이 나옵니다.
print 'hello, world'
<pre class="brush: c">
#include <stdio.h>
int main()
{
printf("hello, world\n");
return 0;
}
</pre>
그러면 다음과 같은 결과가 나옵니다.
#include <stdio.h>
int main()
{
printf("hello, world\n");
return 0;
}
'프로그래밍 이야기' 카테고리의 다른 글
| 티스토리에서 Syntax Highlighter 3.x 쓰기 (0) | 2010/11/15 |
|---|---|
| 파이썬에서 컬러 문자열을 출력해보자 - termcolor (0) | 2010/11/14 |
| 자기소개서 글자수 제한 (1) | 2010/09/25 |
| Java 7에 추가될 기능들 (0) | 2010/09/24 |
| 파이썬 버전 이야기 2.x 그리고 3.x (0) | 2010/07/18 |
| 구글 한국어 음성검색 개발 이야기 해설 (1) | 2010/06/21 |
댓글을 달아 주세요