티스토리 블로그에 SyntaxHighlighter 3.0 적용하기

ETC 2015. 3. 12. 11:26
반응형

출처 : http://blueray21.tistory.com/30

 

 

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>

 

 

?
1
2
3
4
5
6
7
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> 

 

?
1
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>

 

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

3.2.3 collapse

 

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

 

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>

 

 

?
11
12
13
14
15
16
17
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>

 

 

 

 

?
11
12
13
14
15
16
17
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
2
3
1   1st
123 2nd
1234567 3rd

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

 

?
1
2
3
1    1st
123    2nd
1234567    3rd

3.2.8 toolbar

 

 

 

 

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

 

 

 

 

1
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/

 

Brush nameBrush aliasesFile name
ActionScript3     as3, actionscript3     shBrushAS3.js
Bash/shell     bash, shell     shBrushBash.js
ColdFusion     cf, coldfusion     shBrushColdFusion.js
C#     c-sharp, csharp     shBrushCSharp.js
C++     cpp, c     shBrushCpp.js
CSS     css     shBrushCss.js
Delphi         delphi, pas, pascal     shBrushDelphi.js
Diff     diff, patch     shBrushDiff.js
Erlang     erl, erlang     shBrushErlang.js
Groovy     groovy     shBrushGroovy.js
JavaScript     js, jscript, javascript     shBrushJScript.js
Java     java     shBrushJava.js
JavaFX     jfx, javafx     shBrushJavaFX.js
Perl     perl, pl     shBrushPerl.js
PHP     php     shBrushPhp.js
Plain Text     plain, text     shBrushPlain.js
PowerShell     ps, powershell     shBrushPowerShell.js
Python     py, python     shBrushPython.js
Ruby     rails, ror, ruby     shBrushRuby.js
Scala     scala     shBrushScala.js
SQL     sql     shBrushSql.js
Visual Basic     vb, vbnet     shBrushVb.js
XML     xml, xhtml, xslt, html, xhtml     shBrushXml.js


반응형
저작자표시 비영리 변경금지

'ETC' 카테고리의 다른 글

넥서스 7 USB 연결 MAC  (0) 2015.06.26
MySQL Insert into  (0) 2015.04.06
TWO DOTS REVIEW (IOS)  (0) 2014.07.03
캠핑 준비  (0) 2014.06.30
Mac OS X Lion 설치용 USB 드라이브 만들기  (0) 2014.05.10
:

티스토리툴바