티스토리 뷰

Linux/TIP

syntaxhighlighter

이주성 2013. 1. 14. 09:52

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

프로그래밍/기타 2012/04/19 03:33

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/




저작자표시

'Linux > TIP' 카테고리의 다른 글

linux에서 소스 받아서 설치하기 (linux 폴더 구조)  (0) 2020.12.25
FTP 서버 설치 (ubuntu 기준)  (0) 2020.12.04
계정 관리  (0) 2020.04.19
유저그룹 (USER GROUP)  (0) 2018.09.18
좀비프로세스 죽이기  (0) 2013.01.11
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함