1. 다운로드

http://alexgorbatchev.com/SyntaxHighlighter/download/

  • 파일 다운로드 한 다음 압축파일 해제


2. 티스토리 스킨 적용

2.1 My > 관리 > 꾸미기 > HTML/CSS편집 > 파일업로드

2.1.1 script 파일 추가

  • script 파일 모두 업로드


2.1.2 css 추가


2.2 My > 관리 > 꾸미기 > HTML/CSS편집 - skin.html 수정

2.2.1 style 삽입

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

2.2.2 script 삽입

  • </body> 태그 직전에 스크립트 삽입
  • shCore.js는 맨 위에 삽입

<body>
...
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.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" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
</body>

2.3 저장


3. 사용법 - HTML편집모드에서 작성

3.1 기본

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

<pre class="brush: java">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}

3.2 옵션

3.2.1 auto-links

<pre class="brush: java; auto-links: false;">
System.out.println("http://test.com");
</pre> 

System.out.println("http://test.com");

  • 기본은 true. URL이 있으면 자동으로 링크가 생성되는데 링크 안 생기게 할려면 false로 지정

3.2.2 class-name

<style>
.source_custom_style { border: 4px solid #00F; }
</style>
<pre class="brush: java; class-name: source_custom_style">
        System.out.println("Hello, Java ! ");
</pre>

        System.out.println("Hello, Java ! ");

3.2.3 collapse

<pre class="brush: java; collapse: true;">
        System.out.println("Hello, Java ! ");
</pre>

        System.out.println("Hello, Java ! ");

3.2.4 first-line

<pre class="brush: java; first-line: 11;">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}

3.2.5 gutter

<pre class="brush: java; gutter: false;">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}

3.2.6 highlight

<pre class="brush: java; first-line: 11; highlight: [13, 15];">
class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}
</pre>

class HellowJava
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java ! ");
    }
}

3.2.7 smart-tabs

<pre class="brush: plain; smart-tabs: true">
1     1st
123  2nd
1234567   3rd
</pre> 

1	1st
123	2nd
1234567	3rd

<pre class="brush: plain; smart-tabs: false">
1     1st
123  2nd
1234567   3rd
</pre> 

1	1st
123	2nd
1234567	3rd

3.2.8 toolbar

<pre class="brush: plain; toolbar: false;">
hide toolbar
</pre> 

hide toolbar


Appendix 1. Bundled Brushes

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Appendix 2. Option

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

Appendix 3. Themes

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/




'프로그래밍 > 기타' 카테고리의 다른 글

DAS, SAN, NAS  (0) 2012.06.19
SyntaxHighlighter Brush  (2) 2012.06.05
티스토리 블로그에 SyntaxHighlighter 3.0 적용하기  (8) 2012.04.19
SyntaxHighlighter 3.0 테마  (0) 2012.04.18
[언어비교] 서버 환경변수 가져오기  (0) 2012.04.01
Posted by blueray21