블로그에 소스 코드를 이쁘게 넣고 싶을 때에 사용하는 방법이 바로 하이라이트 입니다. 소스 코드를 알록달록하게 만들어 주는 방법인데, 제가 이 방법으로 열심히 꾸며보려다가 Dynamic View로 사용하던 블로그를 기본 셋팅으로 돌렸습니다. 계속 사용하려니 앞의 LaTeX도 복잡해지고 이번 소스 코드 하이라이트 기능도 너무 복잡해져서 쉽게 쉽게 하기 위해 어쩔 수 없는 선택을 하고 말았네요.
제가 사용할 방법은 jQuery SyntaxHighlighter 라는 녀석을 이용하는 것입니다. 먼저 아래의 스크립트를 <head> 뒤나 </head> 앞에 넣어주세요.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js' type='text/javascript'/> <script type='text/javascript'>$.SyntaxHighlighter.init();</script>
그 후에 본문에서 입력시에는 다음과 같이 입력하면 됩니다.
<pre class="highlight"> 코드 </pre>
이렇게만 하면 위와 같은 이쁜 모양을 얻을 수 있습니다. 보다 자세한 설명은 다음의 링크로.
- jQuery SyntaxHighlighter : http://balupton.github.io/jquery-syntaxhighlighter/demo/
2013. 11. 11. 추가
제가 그냥 syntaxhighlighter를 쓰지 않는 이유는... 가장 최근 버전인 3.0.83 버전에서 코드가 길어지면 스크롤바를 만들어내는 이 녀석이 마음에 들지 않기 때문입니다. 그렇다고 스크롤바를 막아버리면 코드 본문은 크게 상관이 없지만 라인 넘버가 밀리는 현상이 나타나서 보기 흉해지더군요. 그래서 열심히 찾다가 맘에 쏙 드는 것을 찾았는데 그게 바로 jQuery 입니다.
그리고 위의 코드를 입력하실 때에는 html 모드로 입력을 하고 코드 부분에는 텍스트 모드로 하는 것이 안전합니다. 일부 기호들이 html 모드에서 인식되기 때문인데, 예를 들어 <, > 등등 이런 기호들은 html 코드로 바꿔야 하기 때문에 텍스트 모드를 권장합니다.
댓글 없음:
댓글 쓰기