Syntaxhighlighter 란 ?
한마디로 소스코드 구문강조 라고 할 수 있습니다.
너무 유명해서 이미 알고 있는 분들은 아시겠지만 모르는 분들도 가끔? 계시기도 합니다.
인터넷 서핑을 하다보면 프로그래밍 언어가 보기 좋게 색깔도 들어가 있고 굵은 글씨로 표시해 주어서 코드의 가독성을 높혀주는 것을 본 적이 있으실 겁니다. 이렇게 편리한 기능을 쉽게 제공해 주는 것 중 하나인 Syntaxhighlighter 입니다.
example) 소스코드 구문강조 종류 중 하나인 Color Scipter
아직 Syntaxhighlighter를 설치하지 않았기 때문에 다른 구문강조(Color Scipter) 를 보여드렸습니다.
자, 이제 Syntaxhighlighter를 설치해 보겠습니다.
1. 먼저 다운로드 눌러서 Syntaxhighlighter소스를 받으세요.
(현재 최신버전인 3.0.83을 다운받겠습니다. 링크가 안되시면 http://alexgorbatchev.com/SyntaxHighlighter/ 여기로~)
2. 다운받은 파일을 압축푸시고
티스토리 관리자 페이지의 HTML/CSS 편집 -> 파일업로드 -> 추가 누르시고 압축 푼 폴더의 scripts폴더와 styles폴더의 하위 파일들을 모두 업로드 해주세요.
styles폴더도 똑같이 추가해주세요
3. HTML/CSS 탭에서 skin.html 적는 부분에 head end tag인 </head> 위에 코드를 붙여 넣습니다.
저는 이클립스를 많이 접하기 때문에 31번째 줄인 style중에서 이클립스만 넣었습니다.
다른 스타일을 원하시면 압춘푼 styles 폴더의 파일 중 shCore.css 빼고 아무거나 쓰시면 되겠습니다.
ex)
4. 드디어 마지막 사용법입니다.
일반적인 글들은 그냥 적습니다.
코드를 적을땐 오른쪽 위에 HTML 체크하신 후에
<pre class="brush:언어">
코드
</pre>
이렇게 적으시면 됩니다.
전 java를 주로 쓰기 때문에 <pre class="brush:java"> 를 썼습니다.
자신이 쓰는 언어가 지원되는지 보시려면 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 여기에 확인하시면 됩니다. (대부분 지원되는 것으로 알고 있습니다.)
5. 결과화면
이상으로 구문강조를 해주는 Syntaxhighlighter 설치, 사용방법을 알아보았습니다.
처음 사용방법 포스팅이라 너무 오래걸렸네요.
적응되면 더 빨리 더 이쁘고 자세하게 남길 수 있겠지요
p.s) 구문강조는 Syntaxhighlighter 말고도 많이 있습니다. 대체로 많이 쓰시길래 설치해 보았습니다.
네이버에서는 Syntaxhighlighter를 지원하지 않습니다. (제가 티스토리로 옮긴 이유 중 하나가 이것 때문...)
네이버 쓰시는 분들은
http://blog.naver.com/PostView.nhn?blogId=brian2&logNo=50171398469
여기 가시면 좋은 자료 얻으실 수 있으실 겁니다.
틀린 부분이 있으시면 말씀해 주세요
그리고 그림에 빨간네모 같은거 어떻게 하나요? 파워포인트로 하니 이미지 해상도가 많이 떨어지네요