조만간 사용할까 싶다.
블로그 특성상 소스 코드를 자주 올리게 되는데, 보기 좋게 올리기 위해
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> 태그를 사용할 경우 소스 코드에 포함된 "<", ">"의 파싱을 잘못하는
경우가 발생하는 것 같다.
소스 코드를 올리기 전에 "<"를 "<"로, ">"를 ">"로 변환 해서 올리는 것이 좋다.