2014년 4월 11일 금요일

Google Blog 에 소스 코드 게시용 SyntaxHighlighter 적용하기.

블로그에 소스를 올릴때 "preetyPrint" 라는 코드를 사용했다.
물론 보기에는 좋았지만, 이 preetyPrint 라는 것은 소스를 복사해 쓰기에는 좋지 않았는데...
텍스트를 선택해서 복사하면 엔터키가 제대로 안먹히는 문제가 있었다.

그래서 찾아 본것이, "SyntaxHighlighter" !!

http://alexgorbatchev.com/SyntaxHighlighter/

이게 가장 흔히 사용되는 듯하다.
적용하는 법은 간단하지만, 문제는 최신 버젼을 적용할 경우 아무리 해도 클릭시 소스코드를 복사 할수 있는 팝업이 뜨지 않는다.



결국 해당 기능이 동작하는 다른 사이트를 참고해서 하위 버젼을 적용할 수 밖에 없었다. (ㅜ.ㅜ)

적용하는 법은 템플릿에서 </body> 태그 바로 앞에...




















를 추가하고.


<pre class="brush: js">
/**
 * SyntaxHighlighter
 */
function foo()
{
     if (counter <= 10)
     return;
    // it works!
}
</pre>


글을 쓸때 이렇게 쓰면 된다.
이제 해당 소스 위에 마우스를 올리면 툴바가 오른쪽 상단에 나타나고, 소스버튼을 클릭하면 새창이 뜨면서 소스를 복사할 수 있는 별도의 창이 뜬다.

어째서 인지는 모르지만 최신 버젼은 툴바를 제대로 지원하지 않는다.

디자인은 preetyPrint 쪽이 맘에 들지만...
뭐 어쩔수 없지.