Etc/Blog
티스토리 블로그에 SyntaxHighlighter 3.0 적용하기
궁극의 java개발자
2015. 12. 14. 10:36
1. 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 티스토리 스킨 적용
2.1 My > 관리 > 꾸미기 > HTML/CSS편집 > 파일업로드
2.1.1 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> |
|
1 |
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> |
|
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> |
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/
출처 : http://blueray21.tistory.com/30