[SyntaxHighlighter] 티스토리에 소스코드 보기 좋게 올리기

  지난 포스트에서 bash 스크립트 코드를 올리다 보니 어떤 블로그에는 아주 보기 좋게 소스코드가 올라오더라 싶어서 어떻게 그렇게 하는지 알아보았다. 같은 기능을 해주는 프로그램들이 꽤 있었는데 필자가 찾은 것 중에 마음에 드는 것은 SyntaxHighlighter라는 프로그램이다. 그래서 이번 포스트에는 SyntaxHighlighter를 설치하고 사용하는 것을 알아보기로 하자.

 

1. SyntaxHighlighter 다운받아서 홈페이지에 올리기

  SyntaxHighlighter 홈페이지에 들어가서 다운받는다. 압축된 파일을 받게 되는데 받아서 scripts 디렉토리 안에 있는 모든 파일과 styles 디렉토리 안에 있는 shCore.css, shCoreXXX, shThemeXXX를 티스토리에 올린다. 여기서 XXX는 스킨 이름으로 Eclipse, Emacs, Midnight 등이 있다.

 

 

 

 

2. 스킨편집하기

  skin.html 파일의 head 부분에

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

 

를 추가한다.

skin.html 파일의 body 부분에

<script src="./images/shCore.js" type="text/javascript"></script> <script src="./images/shAutoloader.js" type="text/javascript"></script> <script src="./images/shBrushAppleScript.js" type="text/javascript"></script> <script src="./images/shBrushAS3.js" type="text/javascript"></script> <script src="./images/shBrushBash.js" type="text/javascript"></script> <script src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js" type="text/javascript"></script> <script src="./images/shBrushJScript.js" type="text/javascript"></script> <script src="./images/shBrushObjC.js" type="text/javascript"></script> <script src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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> <script src="./images/shLegacy.js" type="text/javascript"></script> <script type="text/javascript">     SyntaxHighlighter.all(); </script>

를 추가하면 스킨 변경 끝!

 

3. SyntaxHighlighter 사용하기

  우선 SyntaxHighlighter 사용하기 위해서는 html 편집모드로 추가해야 한다. SyntaxHighlighter를 사용하는데는 두가지 방법이 있다. <pre />와 <script />이다. 둘다 티스토리에서 사용할 수 있다. 사용방법 또한 대동소이 하지만 각 장단점이 있다.

 

① <pre/> 사용하기

  rss에도 표준 <pre />태그로 표시된다는 점과 티스토리 글쓰기 화면에도 그대로 표시된다는 점이 장점이다. 하지만 '<'를 &lt로 변경해서 올려야 한다는 점이 단점이다. 아래는 <pre>를 사용한 예이다. <pre class="brush: 브러시 이름">과 </pre> 사이에 코드를 넣으면 된다. 브러시 이름을 알아내는 방법은 마지막에 설명하도록 하겠다. 'counter <= 10'이 'counter &lt;= 10' 으로 변경되었음을 알 수 있다. 

<PRE class="brush: js">  /**    * SyntaxHighlighter    */   function foo()   {       if (counter &lt;= 10)           return;       // it works!   } </PRE>

  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }

 

② <script /> 사용하기

  '<'를 그대로 사용할 수 있어서 소스코드의 복사 붙여넣기가 가능하다는 점이 장점이다. 하지만 <pre>와 달리 티스토리 글쓰기 화면에서 보이지 않는다. HTML로 보기나 미리보기를 해야만 확인 할 수 있다. 어디에 표시되는지 글쓰기 화면에서 확인할 수 없기 때문에 아래와 같이 황당하게 편집 될수도 있다는 단점이 있다.  또 다른 단점은 코드안에 </script>가 있을 경우, 많은 웹 브라우저가 제대로 표현을 못한다. 그리고 대부분의 rss리더가 <script>부분을 읽지 않기 때문에 블로그에 올리는데는 <pre>가 더 적합 할 수도 있다. 

 

  <script>를 사용할 때는 <SCRIPT class="brush: js" type=syntaxhighlighter><![CDATA[와 ]]></SCRIPT> 사이에 코드를 넣으면 된다.

<SCRIPT class="brush: js" type=syntaxhighlighter><![CDATA[   /**    * SyntaxHighlighter    */   function foo()   {       if (counter <= 10)           return;       // it works!   } ]]></SCRIPT>

※ 브러시 이름 알기

  SyntaxHighlighter는 c++, c#, css, java, Php등 다양한 언어를 지원한다. 사용할때 언어를 지정하기 위해 브러시 이름을 알아야 하는데, 이는 shBrushXXX.js 파일을 열어보면 알 수 있다. 다음은 shBrushBash의 일부분인데 bash와 shell이 브러시 이름인 것을 알 수 있다.