준이아빠's BLOG

SyntaxHighlighter Plugin 사용

TISTORY 2013. 1. 1. 03:47

1. TISTORY에 SyntaxHighlighter plugin을 upload
SyntaxHighlighter 에서 download 받아 압축을 풀면 아래와 같은 파일들을 확인 할 수 있다.
그 중 scripts와 styles 폴더에 존재하는 모든 파일을 upload 한다.
(Upload 방법: TISTORY 관리 > HTML/CSS 편집 >파일업로드 메뉴)

2. skin.html 편집
2-1. Statically load 방식
SyntaxHighlighter plugin을 쓰든 안쓰든, 무조건 모든 JS 파일들 load 하는 방식입니다.
browser 내부적으로 cache를 사용하기 때문에 처음 한 번만 JS 파일들을 요청 하겠지만, 모든 JS 파일들을 load 하기에 때문에 dynamically load 에 비해 페이지 로딩 시 사용자 반응성이 느릴 수 있습니다.

<!-- JQuery ver 1.8.3 -->
<script type="text/javascript" src="./images/jquery-1.8.3.min.js"></script>
<!-- Start SyntaxHighlighter ver 3.0.83 -->
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>
<script type="text/javascript">
    $(document).ready(function() {
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    });
</script>
<!-- End SyntaxHighlighter ver 3.0.83 -->

2-2. dynamically load 방식 (lazy load 방식)
SyntaxHighlighter plugin을 필요 할 때만, 동적으로 등록된 JS 파일들 load 하는 방식입니다.
등록된 brush 모두가 load 되는 것이 아니라 필요한 것만 동적으로 network을 통해 요청되고 load되는 방식이기 때문에 statically load 보다 권장되는 방식입니다.

Reference: autoloader, configuration

<!-- JQuery ver 1.8.3 -->
<script type="text/javascript" src="./images/jquery-1.8.3.min.js"></script>
<!-- Start SyntaxHighlighter ver 3.0.83 -->
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        SyntaxHighlighter.autoloader(
            // 25개의 Brush 등록
            '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.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    });
</script>
<!-- End SyntaxHighlighter ver 3.0.83 -->