Tistory 에 SyntaxHighlighter 적용하기

요즘 여유가 생겨서 그런지 블로그에 글을 올리고 있습니다.

 

여유가 생긴 김에 글을 쓰는 주제가 주로 생각나는 IT 스킬을 올려두는 것이기에 첨부되는 코드를 보기좋게 하는 것에 관심을 가지게 되었습니다.

 

이 글을 해당 블로그에도 적용되어 있는 SyntaxHighlighter 라이브러리를 어떻게 티스토리에 적용하는 지 기록해 두기 위해서 작성되었습니다.

 

우선 SyntaxHighlighter 가 어떤 놈이냐 하면 다음 코드를 보기좋게 표현하는 라이브러리 입니다.

 

function hellow(nm) {
  alert('hi ' + nm);
}

 

 

위의 코드에 SyntaxHighlighter 라이브러리를 적용하면 다음과 같이 보이게 됩니다.

 

 

function hellow(nm) {
  alert('hi ' + nm);
}

 

 

적용방법은 다음과 같습니다.

 

우선 공식 사이트에서 원하는 버전의 파일을 다운로드 받습니다.

http://alexgorbatchev.com/SyntaxHighlighter/ 

 

지금 현재 버전으로 3.0.83버전이 최신이네요.

 

압축된 파일을 다운받아 압축을 해제해서 보면 테스트 페이지와 스크립트, 스타일시트 파일이 있습니다.

여기서 원하는 스크립트 파일과 스타일시트 파일을 찾아서 티스토리에 업로드 합니다.

 

업로드 방법은 관리자 페이지에서 꾸미기 > HTML/CSS 편집 메뉴로 들어가서 오른쪽화면의 파일업로드 를 통하여 선택파일을 업로드 합니다.

 

파일은 자신이 주로 사용하는 코드 종류에 따라 선택적으로 올리면 되는데 고민하기 싫은 경우 전부 올리면 됩니다.

티스토리에서 파일을 업로드 하는 경우 계정의 images 폴더에 올라가게 됩니다.

 

파일이 올라갔다면

HTML 편집에서 다음 코드를 추가합니다.

 

<SCRIPT type=text/javascript src="./images/shCore.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/shBrushJScript.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/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>

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

<SCRIPT type=text/javascript>
  SyntaxHighlighter.all();
</SCRIPT>

 

 

이렇게 한 후 저장하면 일단 적용이 됩니다.

 

사용하는 방법은 글 작성 시 코드를 입력해야 하는 경우에 HTML 편집 모드에서 작성하거나 아니면 웹에디터의 외부컨텐츠 메뉴를 이용하여 코드를 삽입하면 되며 삽입 시 <pre class="brush : 코드언어"></pre> 태그로 감싸주면 됩니다.

 

코드언어는 스크립트 파일을 열어보면 정의가 되어 있는데 다음 페이지를 참고해서 작성하면 됩니다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

 

보여지는 테마도

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

를 참고 하세요.

 

 

라이센스도 걱정없고 자유롭게 사용하면 됩니다.

 

아쉬운 점은 하이라이트로 표현하고 싶은 단어가 적용이 안되어 있는 경우들이 있는데 스크립트 파일을 수정하면 그런 부분도 쉽게 변경이 가능합니다.

 

다음 옵션도 적절히 사용하면 좋고,

<pre class="brush:html">  <!-- HTML 소스표시 -->
<pre class="brush:css">   <!-- CSS 소스표시 -->
<pre class="brush:js">    <!-- JavaScript 소스표시 -->
<pre class="brush:js html-script:true">   <!-- 다른 언어와 HTML -->
<pre class="brush: plain; collapse: true"    // 소스접기
<pre class="brush: plain; first-line: 10"    // 시작행 번호 지정
<pre class="brush: plain; gutter: false"     // SyntaxHighlighter 라인제거
<pre class="brush: plain; highlight: 2"      // 2행 강조
<pre class="brush: plain; highlight: [1, 3]" // 1,3행 강조
<pre class="brush:html highlight:[2,4]">  <!-- 특정 행 강조 -->
<pre class="brush:html first-line:25">    <!-- 시작 행 번호 변경 -->
<pre class="brush:html toolbar:false">    <!-- 도구모음 숨기기 -->
<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->
<pre class="brush:html" title="Blomari Note">  <!-- 제목 표시 -->

 

 

 

다음 유틸과 같이 사용하면 최적입니다.

EntSHCodeGenerator.exe