개발자의 입장에서 블로그를 운영하다 보면, JAVA로 작성한 코드를 티스토리 블로그에서 공유하고 싶을 때가 있습니다. 하지만 코드를 블로그에 복사하면 전부 검은 글씨에 주석도 구분이 안가고, 여러모로 코드가 보기에 안좋습니다. 그래서 코드를 깔끔하고 알아보기 쉽게 옮겨적고 싶어지죠. 그럴 때는 Syntax Highlighter를 사용하면 됩니다.
Syntax Highlighter는 Alex Gorbatchev라는 개발자가 개발하여 무료로 배포하고 있는 JavaScript 기반 코드 하이라이터 입니다. 이 글 속의 코드들도 모두 Syntax Highlighter가 적용되어 있습니다.
Syntax Highlighter 홈페이지: (http://alexgorbatchev.com/SyntaxHighlighter/)
티스토리 블로그에서 Syntax Highlighter를 이용하려면 다음의 세 단계를 따르면 됩니다.
1. 블로그에 Syntax Highlighter의 소스파일을 설치한다.
2. 블로그의 Skin.html 파일 소스를 수정한다.
3. 블로그에 포스팅 할 때 Syntax Highlighter를 적용한다.
1. 티스토리 블로그에 Syntax Highlighter의 소스파일 설치하기
먼저 티스토리 블로그에 Syntax Highligher를 설치해야 합니다. Syntax Highlighter의 최신버전을 다운받습니다. 2014년 현재 최신버전은 3.0.83 입니다. 아래에 3.0.83 버전을 첨부합니다. 첨부파일은 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서도 다운받으실 수 있으며 저작권은 원작자 Alex Gorbatchev에게 있습니다.
syntaxhighlighter_3.0.83.zip압축을 풀고, /scripts, /styles 폴더 내에 있는 파일을 전부 업로드 해 줍니다.
티스토리 관리 페이지에서 [HTML/CSS 편집> 파일업로드] 항목으로 가면 파일을 업로드할 수 있습니다. 자주 쓰는 언어의 스크립트 파일만 업로드해도 무방하지만 용량도 얼마 안되기 때문에 편의상 전부 업로드하는 것으로 진행하겠습니다.
2. 티스토리 블로그의 skin.html 파일 수정하기
업로드가 완료된 것을 확인하였으면 이제 Syntax Highlighter를 블로그에서 로드할 수 있도록 skin.html 파일을 수정해야 합니다. 티스토리 블로그 관리페이지에서 [HTML/CSS 편집] 항목으로 가면 skin.html 파일 소스코드가 보입니다. 여기서 Ctrl+F 를 눌러서 검색옵션을 활성화한 후 </head> 키워드로 검색합니다. 그럼 딱 한 군데 </head>가 있습니다. </head> 바로 위에 다음의 코드를 붙여넣습니다.
그리고 수정된 스킨을 저장해줍니다.
3. 티스토리 블로그에서 글 작성시 Syntax Highlighter 코드 적용하기
이제 준비가 끝났습니다. 앞으로는 블로그 본문에서 Syntax Highlighter를 적용할 수 있습니다. 글 작성시 Syntax Highlighter를 적용하기 위해서는 두 가지 방법이 있습니다. 첫번째는 <pre> 코드를 이용하는 방법이고, 두번째는 <script> 코드를 이용하는 방법입니다. 어느쪽이든 무방하지만 약간의 차이점이 있다고 합니다. 일반적으로 <pre> 태그를 이용하는 방식이 가장 범용성이 좋지만 html 코드를 사용할 때에 '< ' 를 '<' 로 바꾸어 주어야 하는 불편함이 있다고 하네요. (Alex Gorbatchev의 말. http://alexgorbatchev.com/SyntaxHighlighter/ 참고).
어찌되었건 두 가지 방식을 모두 알아보도록 하겠습니다. 두 가지 방식 모두 코드를 작성할 때 html 편집모드에서 작성해야 합니다.
첫번째로, <pre> 태그를 이용해서 코드를 작성할 때는 html 편집 모드에서 다음과 같이 작성합니다.
<pre class="brush: 언어이름;"> /* 여기에 코드를 작성합니다 */ </pre>
두번째로, <script> 태그를 이용해서 코드를 작성할 때는 html 편집 모드에서 다음과 같이 작성합니다.
이제 여러분도 티스토리 블로그에 코드를 깔끔하게 포스팅 할 수 있습니다.