Syntax Highlighter 사용해서 티스토리에 소스 코드 하이라이트 적용하기
블로그를 사용하면서 코딩을 더하고 싶은데 검은색 글자로만 나타나니까 밋밋하더라구요. 그래서 이럴때 많이 사용하는 SyntaxHighlighter 를 사용해서 코딩을 복사해서 넣어 보았어요. 다음이 샘플 결과입니다.
SyntaxHighlighter 는 Alex Gorbatchev 라는 사람이 Javascript 베이스로 개발한 소스코드 삽입 툴입니다. 개발자가 오픈소스로 만들어 나서 모든이들이 상업적인 목적에 쓰지만 않다면 사용하기에는 문제가 전혀 없어요. 그리고 설치하기에도 그다지 어렵지 않고 쉽게 여러가지 설정을 바꿀수 있어서 블러거들이 가장 많이 사용하는 코드 하이라이터 라고 보면 되요.
설치방법
1. 우선 웹사이트에 가서 가장 최근에 나온 ZIP 파일로 되어있는 SyntaxHighlighter 를 다운로드 합니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 압춥을 풀면 여러가지 파일이 있는데 그중 중요한건 scripts 폴더하고 styles 폴더에 들어 있는 파일들이에요.
3. 그 다음 스텝은 scripts 그리고 styles 여기에 있는 파일들을 다 웹사이트 클라우드 스토리지에 다 올려야 합니다.
여기서 한가지 주의 할점이 있어요. 티스토리 자체에서도 "파일업로드" 기능이 있긴 한데 만약 잘못된 파일을 올릴 경우 티스토리 서버에 캐시 공간이 있는지 다시 새로운 파일을 올려도 인식이 안되서 좀 애를 먹었어요. 예를 들어 src 폴더에 가면 shCore.js, shAutoloader.js, shLegacy.js 이 3가지 파일이 있는데 문제는 scripts 폴더 안에도 똑같은 이름의 파일들이 있어요. 그래서 대부분 블러거들이 실수하기 쉬운게 쓰면 안되는 src 안에 있는 shCore.js, shAutoloader.js, shLegacy.js 파일들을 올리고 reference 시켜도 안되니까 scripts 에 있는 똑같은 이름의 파일들을 다시 올려서 reference 해보는데 안되는거죠. 그 이유는 티스토리가 캐시를 클리어 하는 방식이 좀 달라서 그런것 같아요.
그래서 제가 추천해 주고 싶은 방법은 scripts 나 styles 에 있는 파일들을 Tistory 가 아닌 다른 곳에 올리거나 아니면 SyntaxHighlighter 웹사이트 에 있는 링크를 사용하는거에요.
첫번째 방법을 쓰면 Google Cloud 나 개인 웹 서버에 파일을 쓰고 reference 시키면 되구요.
두번째 방법을 쓰면 파일을 굳이 다운로드 하지 않아도 쓸수 있습니다 ^^ 자세한 방법은 아래 링크에 나와 있어요.
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html
4. 이제 HTML/CSS 를 설정해야죠. 티스로리 꾸미기 --> HTML/CSS 편집으로 가시면 다음과 같은 화면이 나옵니다.
skin.html 보이시죠? <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 바로 밑 부분에 다음과 같이 집어 넣으면 되요.
여기서 저는 3번째 스텝에서 업급했듯이 소스코드를 다운로드 하지 않고 SyntaxHighlighter 링크에서 집적 reference 시키는 방법을 사용했어요. 여기서 저는 JAVA 만 사용했기 때문에
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
이 라인 만 있는거지만 다른 프로그래밍 언어를 사용할려면 shBrushPython.js 든 shBrushRuby.js 든 마음되로 추가하거나 바꾸면 됩니다.
5. 마지막으로 티스토리에 글적기로 하고 코딩 소스코드를 다음과 같이 <pre class="brush: 언어"> ... </pre> 태그 사이로 복사에서 넣으면 됩니다.
예를 들어 다음과 같습니다.
// Javascript Syntax Highlighter example
function sayHelloInJavacript(yourName) {
var hello = 'hello, world';
print hello . ' , ' . yourName . '!';
}
여기서 언어는 java, js, ruby 등 여러가지 이죠. 자세한 brush aliases 는 다음 링크에서 찾아 볼수 있습니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/