1. 코드 하이라이트(Syntax Highlighter) 다운로드



2. 코드 하이라이트(Syntax Highlighter) 업로드

  • 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드된다.
  • 코어 필수 파일: scripts/shCore.js
  • 언어 선택 파일: scripts/shBrush*.js
    사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
  • 스타일 선택 파일: styles/shCore*.css
    스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
  • 테마 선택 파일: styles/shTheme*.css
    테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.



3. 코드 하이라이트(Syntax Highlighter) 설정

  • head 태그 사이 title 위에 아래 태그를 넣는다.
  • 여기서 스타일과 테마는 각자 테스트해보며, 원하는 스타일을 찾으면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- [RUNPEACEYA] Syntax Highlighter Setting Start -->
<!-- 필수 JS files -->
<script type="text/javascript" src="./images/shCore.js"></script>
   
<!-- 사용할 언어 1개이상 추가 -->
<script type="text/javascript" src="./images/shBrushBash.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/shBrushColdFusion.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.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/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.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/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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>
  
<!-- 사용할 스타일 택일 추가 -->
<link href="./images/shCoreDefault.css" rel="stylesheet" type="text/css">
  
<!-- 사용할 테마 택일 추가 -->
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
  
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>
<!-- [RUNPEACEYA] Syntax Highlighter Setting End -->



4. 코드 하이라이트(Syntax Highlighter) 사용하기

  • 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위의 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안 쪽에 코드를 입력하면 된다.
1
2
3
<pre class="brush:브러쉬명">
    코드 기입
</pre>
  • 언어 JS파일과 브러쉬명은 아래와 같다.
    언어[브러쉬명]파일명
    ActionScript3as3, actionscript3shBrushAS3.js
    Bash/shellbash, shellshBrushBash.js
    ColdFusioncf, coldfusionshBrushColdFusion.js
    C#c-sharp, csharpshBrushCSharp.js
    C++cpp, cshBrushCpp.js
    CSScssshBrushCss.js
    Delphidelphi, pas, pascalshBrushDelphi.js
    Diffdiff, patchshBrushDiff.js
    Erlangerl, erlangshBrushErlang.js
    GroovygroovyshBrushGroovy.js
    JavaScriptjs, jscript, javascriptshBrushJScript.js
    JavajavashBrushJava.js
    JavaFXjfx, javafxshBrushJavaFX.js
    Perlperl, plshBrushPerl.js
    PHPphpshBrushPhp.js
    Plain Textplain, textshBrushPlain.js
    PowerShellps, powershellshBrushPowerShell.js
    Pythonpy, pythonshBrushPython.js
    Rubyrails, ror, rubyshBrushRuby.js
    ScalascalashBrushScala.js
    SQLsqlshBrushSql.js
    Visual Basicvb, vbnetshBrushVb.js
    XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

(출처: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)



5. 코드 하이라이트(Syntax Highlighter) 사용 시 발생하는 문제 해결

  • 헤더파일 인클루드할 시 "<, >" 특수문자 출력이상 문제
    "<"대신에 "&lt;"사용
    ">"대신에 "&gt;"사용
  • 불필요한 스크롤바가 생성되는 문제
    css 파일에 다음의 태그 추가
    1
    2
    3
    4
    5
    div .syntaxhighlighter {
        overflow-y:hidden !important;
        overflow-x:auto !important;
        font-size:1.0em !important;
    }
  • 주석이 잘못 표시되는 문제
    css 파일에 다음의 태그 추가
    1
    2
    3
    .syntaxhighlighter .comments {
        display:inline;
    }



저작자표시 비영리 변경금지
SENSProgramming Note

티스토리툴바