블로그(티스토리 포함)에서 code 보기 쉽게.. SyntaxHighlighter (무설치?)

굳이 개발을 front-end와 back-end로 나누자면, 계속 back-end 작업만 하다 요새 와서는 UI다 뭐다 이용자(보는 사람)에게 맞추어야 하겠다는 생각을 많이 하게 된다.

처음에 개발하면서 팁들을 조금씩 정리해야지 할 때만 해도.. 본문에 그냥 넣고 내버려뒀더니 주인장조차 눈에 잘 들어오지 않으니, 고민하다 결국 syntax highlighter로 이용자들에게 서비스를 결심하기에 이른다. ㅡ.ㅡ

이번 포스팅은 syntax highlighter 정리이다. 사실 다운로드 받아서 설치해주면 제일 좋다. 내 서버가 있으면야 좋고 나는 관리하기 귀찮아서 안한다는 건 별개의 얘기 티스토리처럼 셋방살이(!)를 하는 경우에는 거기에 맞는 솔루션이 있다. 티스토리에 설치하는 데 대한 포스팅은 다른 분들의 블로그에도 많으니 패스하고 여기에서는 CDN 서비스하는 서버에서 살짝 불러오는 방법이다.

1. 설치

이렇게 header에 넣어주면 된다.

1행 ~ 5행이 필요한 css와 javascript를 불러오는데, 본인이 필요한 syntax 파일을 정의하는 곳이 4행이다. 요새 작업하는게 php라 일단 php 문법을(Brush라고 부름) 불러왔다. 필요에 따라 javascript, css, python, C# 등의 브러시를 추가해주면 된다. 각 브러시의 명칭은 다음을 참고하면 된다 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

가령 javascript 코드라면 shBrashJScript.js를 포함해주면 된다.

단, 이 프로젝트를 개발하고 계속 유지해주는 친절한 고르바초프 씨(!)는 이렇게 서비스를 이용해주시는 사람들 때문에 아마존에서 트래픽이 한 달에 83G에 달한다고 한다. 돈 많이 버는 이용자들은 donation을, 그렇지 않으면 가끔 들어갈 때마다 배너 클릭 한번씩 해드리는 것이 감사를 표하는 예의가 아닐지.. ^^

2. 이용 방법

이용방법은 단순하다.

<pre> element의 class를 다음과 같이 정의한다 : 

<pre class = "brush: php">

// 넣고 싶은 code 삽입 ...

</pre>

여기에서 brush는 필요한 것으로 정의하면 된다. javascript라면 js, Java면 java 이런 식이다. 이것도 여기를 보시면 된다.