티스토리에 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/)

크리에이티브 커먼즈 라이선스 Linsoo 의 저작물인 이 저작물은(는) 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스 에 따라 이용할 수 있습니다.

“티스토리에 SyntaxHighlighter autoloader적용하기”에 대한 3개의 댓글

  1. 안녕하세요
    글 잘 읽었습니다.
    좋은 정보 감사합니다.
    저도 님과 같은 스킨을 쓰고 있는데 , 한 가지 질문을 드려도 될까요?
    사이드바의 스크롤바가 원래 스킨에서는 검정색 선인데, 이걸 어떻게 바꾸셨나요?
    검정색이 눈이 거슬려서 저도 바꾸고 싶은데 알려 주실 수 있으신가요?

    1. 그쪽은 제가 손댄게 없습니다.

      혹시 티스토리에 스킨란에서 적용한거면
      그거 말고 스킨 제작자님 블로그 가서 최신버전 받아보세요.

      저도 첨에 스킨란에 있는거 적용해서 쓰다가 제작자님이 뭔가 버그 수정한거 있다는 댓글 남겨주셔서 블로그에 있는 최신버전으로 쓰고 있습니다.

댓글 남기기

이메일은 공개되지 않습니다.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.