IT스러운 공간

Syntax Highlighter 적용 방법!!! 본문

카테고리 없음

Syntax Highlighter 적용 방법!!!

nanaing 2015. 2. 12. 10:25
728x90


<textarea name="code" class="brush:원하는 언어;">
에디터 모드에서 이 사이에 코드를 작성하면 된다.
</textarea>





사용할 언어 목록은 다음과 같다.


Brush name

Brush aliases

File 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


 나머지 자세한 사항은 홈페이지에 가면 나와있다.


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


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/

 

728x90