티스토리에 SyntaxHighlighter autoloader적용하기

SyntaxHighlighter 라는게 있습니다.
블로그에 소스코드 옮기다 보면 단순 텍스트로 옮기면 가독성에서 좋지 않기 때문에 일반 IDE 처럼 보기 좋게 해주는 스크립트 파일이 있죠.

이거 역시 꽤 오래 전부터 썼는데 이번 스킨 업뎃하면서 이것도 역시 전부 최신버전으로 업그레이드 했습니다.
여기에 정리해 봅니다.

1. 설치
http://alexgorbatchev.com/SyntaxHighlighter/download/ 에 가서 다운로드 받습니다.
scripts, styles폴더 안에 파일을 전부 업로드 합니다.
scripts 폴더에서 자신이 쓸 언어만 골라 업로드 해도 되지만 귀찮으니 전부 올립니다.  언제 쓸지 모르니깐요.

2. 세팅

<!-- SyntaxHighlighter -->      
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shAutoloader.js" type="text/javascript"></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.autoloader(
        'applescript            ./images/shBrushAppleScript.js',
        'actionscript3 as3      ./images/shBrushAS3.js',
        'bash shell             ./images/shBrushBash.js',
        'coldfusion cf          ./images/shBrushColdFusion.js',
        'cpp c                  ./images/shBrushCpp.js',
        'c# c-sharp csharp      ./images/shBrushCSharp.js',
        'css                    ./images/shBrushCss.js',
        'delphi pascal          ./images/shBrushDelphi.js',
        'diff patch pas         ./images/shBrushDiff.js',
        'erl erlang             ./images/shBrushErlang.js',
        'groovy                 ./images/shBrushGroovy.js',
        'java                   ./images/shBrushJava.js',
        'jfx javafx             ./images/shBrushJavaFX.js',
        'js jscript javascript  ./images/shBrushJScript.js',
        'perl pl                ./images/shBrushPerl.js',
        'php                    ./images/shBrushPhp.js',
        'text plain             ./images/shBrushPlain.js',
        'ps, powershell         ./images/shBrushPowerShell.js',
        'py python              ./images/shBrushPython.js',
        'ruby rails ror rb      ./images/shBrushRuby.js',
        'sass scss              ./images/shBrushSass.js',
        'scala                  ./images/shBrushScala.js',
        'sql                    ./images/shBrushSql.js',
        'vb vbnet               ./images/shBrushVb.js',
        'xml xhtml xslt html    ./images/shBrushXml.js'
    );      
    SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter -->  

스킨편집 모드로 들어가서 </body> 윗부분에  위코드를 추가해줍니다.
autoloader는 해당 페이지에서 필요로 하는것만 동적으로 로딩하도록 해줍니다.

이전에는 아래와 같은 방식으로 전부 추가했었는데 그럴경우 매 페이지를 로딩할때 마다

<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>

js파일을 전부 로딩하길래 오토로딩으로 이번에 바꿨습니다.

3. 테마 변경

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

이부분에서 다른 테마 파일을 선택하면 다른 테마로 나옵니다.
테마에 대한 화면을 보고 싶으시다면 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/  에 가면 볼 수 있습니다. 전 그냥 디폴트가 그냥 맘에 드네요.

4. 사용법
글 작성시 html 모드로 변환해서 아래와 같이 쓰면 됩니다.

<pre class"brush:cpp">
int main(){
    int aaa = 0;
    return 0;
}
</pre>

c++이 아니면 저 brush:cpp를 다른걸로 바꾸면 됩니다.

 

참고 사이트: SyntaxHighlighter : (http://alexgorbatchev.com/SyntaxHighlighter/)