SyntaxHighlighter

    워게임 풀이를 올리기 전에 블로그에 SyntaxHighlighter를 적용했다. 코드 좀 이쁘게 보려고.

    어떻게 쓰는지 까먹으면 곤란하니까 글로 적기로 했다.


    1. 다운로드

    http://alexgorbatchev.com/SyntaxHighlighter/


    2. 파일 업로드

    scripts, styles 폴더 안 내용물을 업로드하면 된다.

    내용물은

    1. shCore.js - 필수 파일
    2. shBrushXXX.js - 언어별로 구분됐음. 난 다 업로드함
    3. shCore.css - 필수 파일
    4. shThemeXXX.css - 테마. SyntaxHighlighter의 테마 페이지에서 구경할 수 있음. 난 Default
    5. shCoreXXX.css - 이것도 테마. shCore.css + shThemeXXX.css라고 보면 됨. 이걸로 쓸 거면 3번 업로드안해도 됨.


    3. CSS 적용

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

    이걸 head 태그 안에 잘 넣으면 된다.


    4. 스크립트 적용

    //<!-- SyntaxHighlighter 시작 -->
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shAutoloader.js"></script>
    <script type="text/javascript">
    <![CDATA[
    	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',
    	'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.config.bloggerMode = true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
    //]]>
    </script>
    <!-- SyntaxHighlighter 끝 -->

    이건 </body> 위, 혹 </s_t3>가 있다면 </s_t3> 위에 삽입하면 된다.

    Blogger.com을 사용하는 사람은 bloggerMode에 true로(기본값은 false) 해준다. 티스토리도 해준다더라.


    5. 사용하기

    글 쓰다가 코드 넣을 부분이 있으면 HTML 모드로 전환해서 <pre class="brush:xml;">코드<pre> 같은 식으로 작성하면 된다.

    그런데 HTML, XML 같은 코드는 <, >를 많이 쓰는데 HTML 모드에서 복붙하면 적용이 안된다. html entities를 써야한다.

    나는 그래서 pre 태그만 HTML 모드로 붙여넣고 코드는 위지윅 모드에서 복붙한다.


    이거 적용하는 데 시간을 너무 많이 써버린 거 같다. 공부가 되긴 한건가

    Posted by 코요

티스토리 툴바