코드 하이라이트(Syntax Highlighter)를 티스토리(Tistory)에 적용하기

1. 코드 하이라이트(Syntax Highlighter) 다운로드

• SyntaxHighlighter 3.0.83 다운로드: http://alexgorbatchev.com/SyntaxHighlighter
• SyntaxHighlighter Configuration: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

2. 코드 하이라이트(Syntax Highlighter) 업로드

• 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드된다.
• 코어 필수 파일: scripts/shCore.js
• 언어 선택 파일: scripts/shBrush*.js
  사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
• 스타일 선택 파일: styles/shCore*.css
  스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
• 테마 선택 파일: styles/shTheme*.css
  테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.

3. 코드 하이라이트(Syntax Highlighter) 설정

• head 태그 사이 title 위에 아래 태그를 넣는다.
• 여기서 스타일과 테마는 각자 테스트해보며, 원하는 스타일을 찾으면 된다.

4. 코드 하이라이트(Syntax Highlighter) 사용하기

• 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위의 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안 쪽에 코드를 입력하면 된다.

 
    코드 기입

• 언어 JS파일과 브러쉬명은 아래와 같다.
  

  언어	[브러쉬명]	파일명
  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

(출처: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)

5. 코드 하이라이트(Syntax Highlighter) 사용 시 발생하는 문제 해결

• 헤더파일 인클루드할 시 "<, >" 특수문자 출력이상 문제
  "<"대신에 "&lt;"사용
  ">"대신에 "&gt;"사용
• 불필요한 스크롤바가 생성되는 문제
  css 파일에 다음의 태그 추가
  

  div .syntaxhighlighter { 
      overflow-y:hidden !important;
      overflow-x:auto !important;
      font-size:1.0em !important;
  }

• 주석이 잘못 표시되는 문제
  css 파일에 다음의 태그 추가
  

  .syntaxhighlighter .comments {
      display:inline;
  }