프로그래밍/기타

티스토리 SyntaxHighlighter 사용법 및 샘플

차까꿍 2014. 6. 10. 15:45

1. Syntax Highlighter 설치

1) 다운로드

다운로드는 의외로 간단하다. Syntax Highlighter 공식 홈페이지에서 다운로드 받을 수 있다. 
위 링크를 클릭하면 큼지막 하게 Click Here to Download. 라고 씌여있다.
이 제작자분께서 강력하게 Donate를 원하는 것 같으니 죽어가는 개발자를 위해 Paypal로 돈을 보내줄수도 있겠다.


2) 파일업로드

파일을 다운로드 한 다음 압축을 해재하여, 티스토리의 HTML/CSS 편집에서 추가한다.




3) HTML/CSS 소스수정

이제 HTML/CSS를 수정해 줘야 하는데
Tistory 관리 > HTML/CSS 편집으로 들어가서 skin.html 영역의 <head>와 </head> 사이에
아래 소스를 붙여넣기 해줍니다.
넣는위치를 잘 모를경우 </head> 바로 위에 넣는다고 생각하면 됩니다.


아래 굵게 표시한 부분은 테마로 원하는 css로 변경해 줍니다.
테마는 업로드했던 styles 디렉토리에 shTheme***.css형태로 되어 있습니다.


<!-- SyntaxHighlighter Start -->
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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">
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter End -->

그리고, 범용성을 늘리기 위해 textarea 태그를 이용할 것이므로 추가 수정이 필요한데
<body> 를 아래와 같이 변경해 줍니다.

<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">



2. Syntax Highlighter 사용법

1) 기본

<textarea name="code" class="brush:사용할언어;"> 
이 사이에 소스코드를 작성하면 됩니다.
</textarea>




2) highlight 옵션이용

<textarea name="code" class="brush:사용할언어;highlight:[2,5]"> 
이 사이에 소스코드를 작성하면 됩니다.
</textarea>




3) 그외 옵션이용

<textarea name="code" class="brush:사용할언어;toolbar:false;gutter:false;"> 
이 사이에 소스코드를 작성하면 됩니다.
</textarea>




4) 지정 할 수 있는 속성

속성

기본값

설명

auto-links

true

URL을 클릭하면 페이지 이동이 가능하도록
하이퍼링크를 자동으로 걸어준다.

class-name

''

그외 사용자 지정 class를 추가하고 싶을때 사용한다.

collapse

false

"펼치기" 기능을 사용하고 싶을 때
(티스토리의 "더보기" 기능이 더 나은것 같다)

first-line

1

시작 Line Number를 지정한다.

gutter

true

Line Number를 켜고 끌수 있다.

highlight

null

강조할 라인을 배열로 넘긴다.
(예 : "brush: plain; highlight: [1, 3]")

html-script

false

php, asp, jsp 등과 같이 소스 코드안에 html이 포함되는 경우
html도 하이라이팅하고 싶으면 사용한다

smart-tabs

true

스마트탭 기능의 활성화 여부를 지정한다
(무슨 기능인지 잘 모르겠다)

tab-size

4

TAB 크기를 지정한다.

toolbar

true

툴바를 켜거나 끌 수 있다.


5) highlight 가능한 언어

분류

사용가능 brush명 

필요 파일

 Bash/shell

 bash, shell

 shBrushBash.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

 Groovy

 groovy

 shBrushGroovy.js

 JavaScript

 js, jscript, javascript

 shBrushJScript.js

 Java

 java

 shBrushJava.js

 Perl

 perl, pl

 shBrushPerl.js

 PHP

 php

 shBrushPhp.js

 Plain Text

 plain, text

 shBrushPlain.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