조만간 사용할까 싶다.
블로그 특성상 소스 코드를 자주 올리게 되는데, 보기 좋게 올리기 위해
SyntaxHighlighter 를 사용하기로 했다.
1. SyntaxHighlighter 다운 받기. http://alexgorbatchev.com/SyntaxHighlighter/ 에서 다운 받는다.
포스팅 당시 최신 버전은 3.0.83 이었다.
다운로드 받아 압축을 풀면 아래와 같이 있는데,
필요한 파일은 styles, scripts 디렉토리에 있는 것들이다.
2. 필요한 파일을 UPLOAD. TISTORY 관리자 페이지에 로긴해서, [ 스킨 ] / [ HTML/CSS편집 ] / [ 파일 업로드 ] 화면에서
필요한 파일을 모두 올린다.
필요한 파일은 압축푼 파일 중에 styles, scripts 디렉토리 밑에 있는 모든 파일이다.
올려진 파일을들 보면, images 디렉토리 밑으로 올라간 것을 알 수 있다.
3. TISTORY 스킨 파일 편집. [ 스킨 ] / [ HTML/CSS편집 ] / [ HTML/CSS 편집 ] 화면에서 skin.html 파일에 내용을 편집한다.
<link rel="stylesheet" media="screen" type="text/css" href="./style.css">
|
밑줄에 아래의 내용을 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script type="text/javascript" src="./images/shCore.js"></script>
<link href="./images/shThemeEmacs.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./images/shBrushAS3.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/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/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>
|
위 내용 처럼 압축을 풀었을때 경로가 아닌, 파일이 올라간 images로 경로를 바꾸어야 한다.
두번째 "shThemeEmacs.css" 파일은 보여줄 테마를 지정한 것이다.
테마 css 파일을 이것저것 지정해보고 마음에 드는 것으로 결정하면 된다.
(사실 맘에 쏙 드는 것이 없었는데. Emacs 테마가 가장 나은 것 같다.)
동일한 방법으로 skin.html 파일 가장 하단 </body> 위쪽에 아래와 내용을 넣어 준다.
1 2 3 4 | <script type="text/javascript">
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>
|
여기서 필요한 코드는 맨 밑줄 함수 실행부 이고, 그외 설정 부분이다.
stripBrs를 true로 설정하면, TISTORY 에서 자동으로 <br> 태그를 붙이는 걸 무시 할 수 있다.
4. TISTORY에서 글쓰기. 글을 쓸때에는 소스 코드가 들어갈때는 html 모드에서 글을 써야한다.
위와 같이 html 체크박스를 체크하면, html 모드에서 글을 입력할 수 있다.
소스 코드를 넣을때 아래와 같은 문법으로 넣는다.
1 2 3 4 5 6 7 8 9 10 | <pre class="brush: sql">
CREATE TABLE CVS_COMMIT
(
SEQ NUMBER(10) NOT NULL,
USERID VARCHAR2(20) NOT NULL,
REG_DATE DATE DEFAULT SYSDATE,
PROJECT VARCHAR2(50) NOT NULL,
FILENAME VARCHAR2(500) NOT NULL
);
</pre>
|
소스의 내용은 <pre></pre> 태그 사이에 넣어주고, class의 brush 속성에 원하는 문법을 지정한다.
지정 가능한 문법은 아래와 같다.
| 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 |
첫번째 컬럼이 문법, 두번째 컬럼이 brush에 지정할 속성 상수,
세번째 컬럼이 필요한 Javascript 파일로써 TISTORY에 UPLOAD되어 있어야 한다.
문법 뿐 아니라 추가 속성을 지정할 수 있는데, 아래와 같이 ";" (세미콜론) 로 구분한다.
<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>
|
지정 할 수 있는 속성 목록은 아래와 같다.
| 속성 | 기본값 | 설명 |
|---|
| 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 | 툴바를 켜거나 끌 수 있다. |
이제 TISTORY에서 깔끔한 코드를 볼 수 있다.
<주의 사항>
-. SyntaxHighlighter 3.0.83 버전에 버그가 하나 있다.
일부 코드에 대해 Line Number가 어긋나 보이는 경우가 있다.
한 Line 에 긴 코드가 포함된 경우 wrapped(자동줄바꿈) 처리를 하면서 잘못 처리하는 것 같다.
소스 코드를 무조건 올리지 말고, 적당히 줄바꿈 처리를 해주고 올리는 것이 좋다.
-. html모드에서 <pre></pre> 태그를 사용할 경우 소스 코드에 포함된 "<", ">"의 파싱을 잘못하는
경우가 발생하는 것 같다.
소스 코드를 올리기 전에 "<"를 "<"로, ">"를 ">"로 변환 해서 올리는 것이 좋다.
syntaxhighlighter_3.0.83.zip