개발자들 블로그를 보면 소스코드를 보기 좋게 표시해주는 것을 자주 볼 수 있다. 물로 글상자 등으로 묶어서 표현할 수 도 있지만 실제 소스편집기 같은 곳과 같은 비주얼을 확인하기는 조금 힘들다. 이럴때 사용하는게 소스코드 하이라이트이다. 구글 프로젝트에 있는 SyntaxHighlight를 사용하면 된다.

1. 관련파일 설치
 http://code.google.com/p/syntaxhighlighter/에서 다운로드 받거나 아래 파일을 다운로드 받는다.

다운받은 파일의 압축을 풀면 3개의 폴더가 나타나는데 script, style 폴더를 서버에 업로드 시킨다. 티스토리의 경우 스킨 -> HTML/CSS 편집 메뉴에 업로드 기능을 사용하여 업로드 시킨다.




2. 스킨 수정

블로그의 스킨을 수정한다. 티스토리의 경우 스킨 -> HTML/CSS 편집 메뉴에서 skin.html을 수정하면 된다.
스킨에서 </head> 위에 아래의 소스코드를 추가하여 준다. 필요에 따라 수정하면 된다.
<!-- code syntaxhighlighter -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script  type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script  type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeFadeToGrey.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>
<!-- code syntaxhighlighter -->

3. SyntaxHighlight 사용하기

블로그에 글을 작성할 때 소스코드를 입력한후 html 모드에서 소스보드 압뒤에 <pre> 태그를 이용하여 감싸주기만 하면 된다.
<pre class="brush: js"> ... source code ... </pre>

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. BlogIcon 끼룩 2011.04.03 11:30 신고

    좋은 정보 감사합니다. ^^

+ Recent posts