SyntaxHighlighter는 웹 페이지 내에서 여러가지 언어로 작성된 코드들을 보기 좋게 만들어주는 자바스크립트 엔진(?)이라 할 수 있습니다. 한 마디로 말해, 코드를 보기 좋게 해 준다는 것이지요. 아래 그림과 같이 말이죠.

SyntaxHighlighter를 설치려면, 해당 홈페이지에 언급되어 있는 대로 다음 순서를 따르면 됩니다.


1. Add base files to your page : shCore.js and shCore.css
    기반 파일들을 웹 페이지에 추가하세요 : shCore.js와 shCore.css

2. Add brushes that you want (for example, shBrushJScript.js for Javascript, see the list of all available brushes)
    원하는 브러시를 추가하세요.(예를 들어 자바스크립트를 위한 브러시는 shBrushJScript.js입니다. 가용한 브러시 목록을 확인하세요)

3. Include shCore.css and shThemeDefault.css
    shCore.css와 shThemeDefault.css를 포함시키세요.

4. Create a code snippet with either <pre /> or <script /> method
    코드 조각을 <pre /> 태그나 <script /> 태그와 함께 작성하세요.

5. Call SyntaxHighlighter.all() Javascript method
    SyntaxHighlighter.all() 자바스크립트 메소드를 호출하세요.


실로 아주 간단한 방법으로 훌륭한 Code Highlighting 기능을 사용할 수 있게 됩니다. 

그럼 이제 나의 티스토리 블로그에 SyntaxHighlighter를 설치하기로 합시다. 이 글을 쓰는 시점(2013.08.07)에 배포되어 있는 SyntaxHighlighter의 최신 버전은 3.0.83입니다.


1. SyntaxHighlight 3.0.83 버전을 다운로드합니다.

2. 다운로드한 ZIP 파일을 임시 디렉토리에 압축해제합니다. 다음과 같은 모양이 될 것입니다.

3. 이들 파일들 중, 업로드해야 하는 파일들은 scripts 디렉토리와 styles 디렉토리 내의 js 파일과 css 파일들 입니다. 이들 파일을 티스토리에 업로드합니다. 블로그 관리모드로 들어가 HTML/CSS편집 > 파일업로드 > 추가 버튼을 이용합니다.

4. 추가 버튼을 이용하여 모든 scripts 디렉토리와 styles 디렉토리 내의 js, css 파일들을 업로드합니다. 여러 개의 파일을 한꺼번에 업로드할 수 있으니 단 두 번의 업로드로 모든 파일을 업로드할 수 있습니다. 아쉬운 점은, 업로드한 파일들이 모두 images/ 디렉토리 하위에 위치하게 된다는 것이죠. 티스토리는 사용자가 특정 하위 디렉토리를 생성하는 것을 왜 막았을까요?

5. 아무튼 이렇게 업로드가 되었다면, 업로드된 파일이 정상적으로 접근되는지 확인해봅니다. 티스토리는 스킨 컨텐츠를 CDN으로 서비스하며, 각각의 블로그마다 별도의 디렉토리를 만들어 파일을 관리하고 있습니다. 제 블로그에서 업로드한 파일은 다음 URL로 접근할 수 있습니다. http://ts.daumcdn.net/custom/blog/156/1568579/skin/images/shCore.js 즉, 제 블로그의 CDN 디렉토리는 156/1568579 네요. 

6. 이제 HTML/CSS 탭으로 이동하여, SyntaxHighlight를 설치합니다. 아래와 같이 필요한 파일들을 추가하고 SyntaxHighlighter.all()을 호출합니다. 물론, 만일을 위해 기존의 skin.html 파일은 백업해 두고, 새로 추가하는 부분 외에는 건드리지 않도록 합니다.

7. 마지막으로 저장 버튼을 누르면 SyntaxHighlight에 대한 설치가 완료됩니다.


당연한 이야기지만, SyntaxHighlight는 HTML 태그에 대해 적용되므로, 블로그에 글을 작성할 때 HTML 직접 작성을 이용하야 합니다. 한 번 해보죠.


public static void main(String args[]){
    System.out.println("Hello, World!");
}


잘 되나요? 저는 잘 되는 듯 하네요. 

상세 설정은 [여기]로, brush 목록은 [여기]에서 확인해 보시기 바랍니다.

여러 가지 설정을 추가하여 보기 좋게 만들어 봅시다. 지금까지 SyntaxHighlight를 티스토리 스킨에 추가하는 방법에 대해 알아보았습니다.

저작자 표시 비영리 변경 금지
신고
Posted by Layered 트랙백 0 : 댓글 0

댓글을 달아 주세요