현재 비공개로 설정된 예전 글을 보려면 …
  1. 2010/01/04 티스토리에서 코드 하이라이터 사용하기

소스 코드를 글에서 다루는 블로그라면 코드 하이라이터를 쓰고 싶다라는 생각을 해봤을 겁니다. 텍스트 큐브나 기타 설치형 블로그의 경우에는 플러그인을 추가하는 것으로 끝났지만 티스토리에서는 플러그인을 설치할 수 없기 때문에 그에 따른 코드 하이라이터(의 적용 방법을 알아보겠습니다.

이 글에선 Alex Gorbatchev에서 배포하는 SyntaxHighlighter로 진행하겠습니다.

 sh21362.zip

먼저 위의 파일을 다운받습니다. 이 폴더 내 파일들은 아래와 같은 구성입니다.

sh21362.zip의 구성

 
이 파일들을 모두 티스토리의 스킨 메뉴를 통해 올려줍시다.

파일 업로드의 위치


그리고 파일 업로드 탭 옆의 HTML/CSS 편집으로 들어가 skin.html의 </HEAD> 앞 부분에 다음과 같은 코드를 넣어줍니다.
 
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
추가적으로 하이라이트할 언어의 브러쉬는 추가하고 그렇지 않은 브러쉬는 빼는 방법으로 브러쉬를 사용할 수 있으며 테마 역시 shThemeDefault.css 포함 6가지의 테마 중 사용할 테마를 선택할 수 있습니다. 이제 하이라이터의 설치는 끝났습니다.

글에서는 html모드에서 아래와 같이 하이라이트를 불러올 수 있습니다.
  

<PRE class> 를 통해 <PRE class="brush: vb;">나 <PRE class="brush: cshap;"> 같은 위에서 불러온 브러쉬의 언어를 하이라이트할 수 있습니다.

이러한 방식으로 티스토리에서 코드 하이라이터를 사용해 작성한 코드를 좀 더 강조를 할 수가 있으며, 오른쪽 마우스 클릭 금지 스크립트가 걸린 블로그에서도 코드를 복사할 수 있게 해주어 그 글을 읽는 사람들이 좀 더 편하게 도와줄수도 있겠죠.