SyntaxHighlighter - 블로그에 소스 코드를 보기 좋게 삽입해보자

SyntaxHighlighter - 블로그에 소스 코드를 보기 좋게 삽입해보자

SyntaxHighlighter는 자바 스크립트를 이용해 소스 코드에 스타일을 적용해서 마치 에디터에서 코드를 보듯 보기 좋게 꾸며준다.

홈페이지 : http://alexgorbatchev.com/wiki/SyntaxHighlighter
다운로드 : http://alexgorbatchev.com/SyntaxHighlighter/download/

1. 설치하기(티스토리 기준)
   
   다운받아서 압축을 풀면 다음과 같은 파일이 생긴다
   
   
   
   이중 scripts 와 styles 디렉토리에 있는 파일들을 블로그에 업로드한다.
   티스토리의 경우 관리자 페이지에서 스킨 - HTML/CSS 편집 메뉴로 이동해서 파일 업로드 탭을 클릭한 후 파일을 올리면 된다.
   
   
   
   
   
   업로드된 파일을 확인 후에 다시 HTML/CSS 편집 탭을 눌러서 skin.html에  아래의 내용을 삽입한다. 
   
   

   <script src="./images/shCore.js" type="text/javascript"></script>

   <script src="./images/shBrushBash.js" type="text/javascript"></script>

   <script src="./images/shBrushCpp.js" type="text/javascript"></script>

   <script src="./images/shBrushCSharp.js" type="text/javascript"></script>

   <script src="./images/shBrushCss.js" type="text/javascript"></script>

   <script src="./images/shBrushDelphi.js" type="text/javascript"></script>

   <script src="./images/shBrushDiff.js" type="text/javascript"></script>

   <script src="./images/shBrushGroovy.js" type="text/javascript"></script>

   <script src="./images/shBrushJava.js" type="text/javascript"></script>

   <script src="./images/shBrushJScript.js" type="text/javascript"></script>

   <script src="./images/shBrushPhp.js" type="text/javascript"></script>

   <script src="./images/shBrushPlain.js" type="text/javascript"></script>

   <script src="./images/shBrushPython.js" type="text/javascript"></script>

   <script src="./images/shBrushRuby.js" type="text/javascript"></script>

   <script src="./images/shBrushScala.js" type="text/javascript"></script>

   <script src="./images/shBrushSql.js" type="text/javascript"></script>

   <script src="./images/shBrushVb.js" type="text/javascript"></script>

   <script src="./images/shBrushXml.js" type="text/javascript"></script>

   <link href="./images/shCore.css" type="text/css" rel="stylesheet"><link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">

   <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf'; SyntaxHighlighter.all();</script>

   
   
   
   SyntaxHighlighter가 페이지 로딩하는데 영향을 적게 주게 하려면 사용하지 않는 언어는 제외하고 skin.html 가장 뒤쪽에(</body> 바로 위) 넣어 주는 것이 좋다.
   
   
   
   
   
   이것으로 설치는 끝이다. 빨간 밑줄 부분을 변경하면 테마를 바꿀 수 있는데, 테마 변경에 대해서는 다시 설명할 것이다. 
   
   
   
2. 사용하기
   사용은 pre 태그를 쓰면된다. 아래 샘플 코드를 보자.
   
   <pre class="brush: java">
   public class HelloWorld {
       public static void main(String[] args) {
           System.out.println("Hello World!");
       }
   }
   </pre>
   
   
   
   
   ?

   1 2 3 4 5

   public class HelloWorld {     public static void main(String[] args) {         System.out.println("Hello World!");     } }

   
   (팁) 티스토리에서 pre 태그를 사용하기 위해서 HTML 편집모드로 갔다가 다시 HTML 편집모드를 해제하면 pre 태그부분에 <br/> 태그들이 자동으로 생성된다. 이를 방지하기 위해서는 HTML 편집모드로 들어간 다음에 입력이 끝나면 HTML 편집모드를 해제를 하지말고 바로 저장하기 버튼을 눌러 저장을 하자.
   
   
   <pre class="brush: java"> 에서 brush는 자바외에도 다양한 언어를 지원하고 있다. java 대신 아래 표를 보고 원하는 언어의 Brush aliases를 입력해 주면 된다.
   
   
   
   
   
   
3. 테마 바꾸기
   skin.html에 다음과 같은 코드를 삽입했었다.
   
   <link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">
   
   
   밑 줄 부분인 shThemeDefault.css 를 바꿔주면 테마를 변경할 수 있다. 기본적으로 제공하는 테마는 shThemeDefault.css, shThemeDjango.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMidnight.css, shThemeRDark.css 가 있다.
   
   Default Theme
   
   <link href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">
   
   
   
   
   Django Theme
   <link href="./images/shThemeDjango.css" type="text/css" rel="stylesheet">
   
   
   
   
   shThemeEmacs.css
   <link href="./images/shThemeEmacs.css" type="text/css" rel="stylesheet">
   
   
   
   
   shThemeFadeToGrey.css
   <link href="./images/shThemeFadeToGrey.css" type="text/css" rel="stylesheet">
   
   
   
   
   shThemeMidnight.css
   <link href="./images/shThemeMidnight.css" type="text/css" rel="stylesheet">
   
   
   
   
   shThemeRDark.css
   <link href="./images/shThemeRDark.css" type="text/css" rel="stylesheet">
   
   
   
   출처 : 
   http://lovelywolf.tistory.com/420