'SyntaxHighlighter 3'에 해당되는 글 1건

  1. TISTORY 에서 SyntaxHighlighter 사용하기. (6)

TISTORY 에서 SyntaxHighlighter 사용하기.

블로그 특성상 소스 코드를 자주 올리게 되는데, 보기 좋게 올리기 위해 
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 파일에 내용을 편집한다.
   


    밑줄에 아래의 내용을 추가한다.
























  
   위 내용 처럼 압축을 풀었을때 경로가 아닌, 파일이 올라간 images로 경로를 바꾸어야 한다.

   두번째 "shThemeEmacs.css" 파일은 보여줄 테마를 지정한 것이다.
   테마 css 파일을 이것저것 지정해보고 마음에 드는 것으로 결정하면 된다.
   (사실 맘에 쏙 드는 것이 없었는데. Emacs 테마가 가장 나은 것 같다.)

   동일한 방법으로 skin.html 파일 가장 하단 </body> 위쪽에 아래와 내용을 넣어 준다.



     여기서 필요한 코드는 맨 밑줄 함수 실행부 이고, 그외 설정 부분이다.
     stripBrs를 true로 설정하면, TISTORY 에서 자동으로 <br> 태그를 붙이는 걸 무시 할 수 있다.

   4. TISTORY에서 글쓰기.
     글을 쓸때에는 소스 코드가 들어갈때는 html 모드에서 글을 써야한다.


   위와 같이 html 체크박스를 체크하면, html 모드에서 글을 입력할 수 있다.
   소스 코드를 넣을때 아래와 같은 문법으로 넣는다.

<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> 태그를 사용할 경우 소스 코드에 포함된 "<", ">"의 파싱을 잘못하는
   경우가 발생하는 것 같다. 
   소스 코드를 올리기 전에 "<"를 "&lt;"로, ">"를 "&gt;"로 변환 해서 올리는 것이 좋다.