Syntax Highlighter 적용 방법!!!

공지

Syntax Highlighter 적용 방법!!!

메론맛 2014. 4. 26. 04:11

<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 추가

css 파일은 shCore.css와 사용할 테마만 선택
테마 샘플 :

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

2.2.1 style 삽입

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>

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

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

3.2.2 class-name

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>

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

1   1st
123 2nd
1234567 3rd

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/

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