Skip to main content

SyntaxHighlight – 블로그 소스코드 하이라이트

개발자들 블로그를 보면 소스코드를 보기 좋게 표시해주는 것을 자주 볼 수 있다. 물로 글상자 등으로 묶어서 표현할 수 도 있지만 실제 소스편집기 같은 곳과 같은 비주얼을 확인하기는 조금 힘들다. 이럴때 사용하는게 소스코드 하이라이트이다. 구글 프로젝트에 있는 SyntaxHighlight를 사용하면 된다.

1. 관련파일 설치
 http://code.google.com/p/syntaxhighlighter/에서 다운로드 받거나 아래 파일을 다운로드 받는다.
cfile29.uf.203F97254BCADF6421D178.zip

다운받은 파일의 압축을 풀면 3개의 폴더가 나타나는데 script, style 폴더를 서버에 업로드 시킨다. 티스토리의 경우 스킨 -> HTML/CSS 편집 메뉴에 업로드 기능을 사용하여 업로드 시킨다.

2. 스킨 수정

블로그의 스킨을 수정한다. 티스토리의 경우 스킨 -> HTML/CSS 편집 메뉴에서 skin.html을 수정하면 된다. 스킨에서 </head> 위에 아래의 소스코드를 추가하여 준다. 필요에 따라 수정하면 된다.

3. SyntaxHighlight 사용하기


블로그에 글을 작성할 때 소스코드를 입력한후 html 모드에서 소스보드 압뒤에 <pre> 태그를 이용하여 감싸주기만 하면 된다.

 

3 thoughts to “SyntaxHighlight – 블로그 소스코드 하이라이트”

  1. 핑백: Weide Radar

댓글 남기기