블로그에 소스코드를 보기좋게. SyntaxHighlighter

SyntaxHighlighter는 블로그에 프로그램 소스코드를 보기좋게 해주는 프로그램입니다. 프로그래머분이고 블로그에 소스코드를 표시하려고 했던 분이라면 왠만하면 설치해 주는게 좋은 프로그램이지요. 실제로 보신분도 많으실 겁니다.

우선 이 프로그램은 자바스크립트와 css, 몇몇의 이미지로 구성되어 있습니다. 따라서 자신의 블로그에 이 프로그램을 설치하려면 최소한 블로그 사이트에 파일 업로드가 가능해야 합니다. 직접 사이트를 운영하신 분이야 당연히 가능할거고 이 글에서는 현재 이 블로그가 티스토리에 있는 관계로 티스토리를 기준으로 설치를 설명하겠습니다.

우선 파일을 다운 받습니다. 이 글을 쓰는 현재 최신버전은 2.0.320로서 이곳 에서 다운받을 수 있습니다.

다운받은 후 압축을 푼후에 디렉토리에 있는 모든 파일을 티스토리에 업로드 해야 합니다. 압축을 풀면 scripts, src, styles 디렉토리가 나오는데 티스토리의 관리페이지에서는 디렉토리째 업로드는 불가능하므로 직접 디렉토리들로 이동해서 거기 있는 모든 파일을 업로드 하세야 합니다. 또한 티스토리의 경우는 업로드하는 모든파일은 images 디렉토리로 업로드가 되는듯 합니다.

업로드페이지는 관리자 페이지의 스킨을 선택해서 들어 가면 됩니다.

파일업로드 버튼을 누르고 압축을 풀어놓은 디렉토리들을 이동해 가면서 모든 파일을 업로드 합시다.(압축해제 루트의 test.html 과 LGPLv3.txt 파일은 업로드 할 필요가 없습니다)

그런 다음 아래 내용을 HTML/CSS 편집의 skin.html 부분에 삽입합니다. 아래 그림처럼 </head> 위에 넣으면 됩니다. 다른 분의 블로그에서는 </body>윗부분에 넣으라는 분도 있는데 어디에 넣던 작동 자체에는 큰 상관이 없습니다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.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/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>

위 그림에서 처럼 </head>태그 위에 복사해 넣습니다.

skin.html 수정이 끝났으면 이제 저장을 합니다.

저장버튼을 눌러주면 끝~~~

그러면 이제 설정이 다 되었습니다.

실제 사용할때는

<pre class="brush:ruby;">
소스코드
</pre>

이런식으로 사용하면 됩니다. 'brush: ' 뒷부분에 언어 이름을 적어주면 되죠.

class="brush:ruby;"
class="brush:python;"
class="brush:csharp;"

이런식으로 말이죠.

<사용예>

    class User
        def initialize(uid, name, ip)
            @uid = uid
            @name = name
            @ip = ip
        end
    end  

여기까지가 표준적인 사용방법입니다.

하지만 티스토리에선 약간의 문제가 있습니다. 문제는 이 프로그램에선 <pre> 태그를 씁니다. 그리고 이 태그를 고쳐주기 위해선 html 편집모드로 변경해야 하는데 문제는 html 편집모드와 위지윅 편집모드를 왔다갔다 하면 소스코드에 <br/> 태그가 가득 붙는다는 것입니다. 심지어는 변경을 할때마다 <br/> 태그가 계속 추가로 붙습니다. --; 물론 한번에 편집을 끝내고 편집모드를 변경하지 않으면 되지만 편집하다 보면 그렇지가 않을때가 많죠.

결론적으로 말하자면, 추가 설정을 해 줘야 합니다. 해결방법은 여기 에 있습니다.

만일 저 해결 방법을 적용했다면 다음과 같이 글을 작성하면 됩니다.

<사용예>

class User
    def initialize(uid, name, ip)
        @uid = uid
        @name = name
        @ip = ip
    end
end  

처음의 사용예와 보기엔 똑같아 보이지만 이번 예는 <pre>태그가 아닌 <blockquote> 태그를 이용한 것입니다.

<blockquote class="brush:ruby;">
소스코드
</blockquote>

이런식으로 작성하면 됩니다.

장황하게 적었지만 파일업로드와 스킨수정 두가지만 해주면 되는 간단한 작업입니다. 나중에 발견한 티스토리의 <br/> 무한붙기 때문에 다소 수정작업이 있어야 하긴 합니다만...

마지막으로 테마 변경방법에 대해 적어 볼까 합니다. 설명은 syntaxhightlighter 사이트에 잘 되어있고 각 테마를 사용시 색상이 어떻게 바뀌는 지도 볼 수 있습니다. 링크는 이곳 입니다.

<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>

skin.html 에 복사해 넣는 부분에 위 라인이 있는데 이걸 원하는 테마 파일명으로 바꿔주면 됩니다. 위는 기본 테마입니다.

<link type="text/css" rel="stylesheet" href="./images/shThemeRDark.css"/>

이와 같이 맘에드는 테마 파일명으로 바꿔주면 됩니다. 링크된 곳을 보시고 맘에드는 테마가 있으시다면 바꿔서 사용하세요.