-
티스토리(tistory) 구문강조(SyntaxHighlighter) 설치 및 활용하기정보통신에너지/웹프로그래밍 2012. 12. 7. 10:46
어제 SyntaxHighlighter를 티스토리에 설치하고 이것저것 해보느라
삽질 좀 했네요.
결론적으론 어쨌든 삽질 끝에 원하는 결과를 만들어냈는데요,
SyntaxHighlighter란 티스토리에서 구문강조 기능을 집어 넣는 것입니다.
이게 무슨 말이냐면
보통 프로그래밍 할 때 C언어나 기타 언어의 소스 코드를 티스토리에 적고 싶을 때가 있습니다.
근데 이 소스 코드란 것이 그냥 소스 코드만 적으면 가독성이 무척 떨어지죠.
따라서 함수나 변수, 혹은 기타 눈에 확 띄어야하는 중요한 요소들을
색상이나 음영 등으로 알아보기 쉽게 해주는 것이 바로 구문강조(SyntaxHighlighter)입니다.
보통 프로그래밍을 할 때 쓰는 툴 들, 울트라에디트나 이클립스 등은 모두 이 기능을 기본적으로 가지고 있죠.
특히 이 구문강조의 종결자는 소스인사이트(Source Insight) 라는 프로그램입니다. ㅋㅋ
나중에 소개할 기회가 있겠죠.
어쨌든 티스토리(꼭 티스토리가 아니라도 어떤 웹 솔루션에도 SyntaxHighlighter는 유용하게 사용될 수 있습니다.)에 SyntaxHighlighter를 까는 법을 간략히 소개해보겠습니다.
1. 다음 사이트에서 SyntaxHighlighter 3.0.83 을 다운로드 받는다.
http://alexgorbatchev.com/SyntaxHighlighter/
2. 다운로드 받은 SyntaxHighlighter 압축 파일의 압축을 푼 후, 다음 두 폴더 내의 파일들을 모두 티스토리에 업로드 한다.
scripts 폴더, styles 폴더
3. 다음과 같은 html 코드를 티스토리의 skin.html 파일 내의 <head> 안에 있는
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
코드 바로 밑에 집어 넣는다.
4. style.css 파일 내의 @charset "utf-8"; 바로 밑에 다음과 같은 코드를 집어 넣는다.
div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; font-size:1.2em !important; }5. shCoreDefault.css 파일을 입맛에 맞게 수정해준다. (textarea 부분을 고치면 원하는대로 적용이 됩니다.)
6. 실제 코드 적용시 다음과 같은 명령어를 사용하면 된다.
코드내용
이 과정을 진행하다가 생긴 문제점은 css에 font-size를 변경해도 적용이 안되는 부분이었습니다.원인을 알 수 없어서 한참 헤메었고, 사실 지금도 잘 모르겠는데
어쨌든 font-size를 변경하고 싶으면 shCoreDefault.css 파일 내의 textarea 부분의 font-size를
변경하면 잘 적용이 되더군요.
전 PHP만 주로 쓸 것이기 때문에 php 관련 js 파일만 브러시로 집어 넣었는데
scripts 폴더 내부를 보면 여러 종류의 언어 형식을 집어 넣을 수 있습니다.
다만 js 파일을 너무 많이 집어 넣으면 페이지 최초 로딩시 시간을 많이잡아 먹겠지요.
그래서 필요한 js파일만 넣어주는 센스가 필요합니다.
언어형식은 SyntaxHighlighter 웹페이지에 자세히 나와 있습니다.
php 같은 경우
<pre class="brush:php>
라고 사용하면 됩니다.
이상 끝!!
