[Tools/소개] 소스코드 Style 적용 방법 (highlighter 3.0.83)

블로그에 소스코드를 올릴 때, 깔끔하게 올려주는 툴을 소개합니다.

 

1. Scripts 다운로드 : http://alexgorbatchev.com/SyntaxHighlighter/download/

  - 라이센스 정보 : MIT License & GPL 3.0

 

  참고로  설치는 매우 간단합니다.

위의 위치에서 압축파일을 받은후, script 및 css 파일을 업로드하고 이 파일들에 대한 위치 정보를 tistory skin html 소스의 head 영역에 삽입해주면 완료입니다.

이후의 절에서 간단하게 이를 설명합니다.

    

2. 설치

2.1 Scripts 업로드

아래와 같이 TISTORY 관리 페이지에 Scripts와 CSS 파일들을 업로드한다.

 

 

 

  - Scripts 폴더 및 styles 폴더 아래의 파일들만 업로드해도 상관없다.

     (사실 모든 파일을 올릴 필요는 없을 것 같으나, 찾기 귀찮으니 모두 올렸다.)

 

2.2 파일 업로드 옆의 HTML/CSS 탭을 선택해서 아래와 같은 구문을 삽입한다.

  - 위의 Script 및 CSS 를 사용하기 위한 작업이다. 위치는 HTML head 내에 어디에 삽입해도 상관없다.

     (역시 귀찮아서 “</head>” 를 찾고 그 위에 아래의 문구를 삽입했다.)

<!-- Start Point from syntaxhighlihter 3.0 -->     <script type="text/javascript" src="./images/shCore.js"></script>     <script type="text/javascript" src="./images/shBrushJScript.js"></script>     <link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>     <script type="text/javascript">SyntaxHighlighter.all();</script>         <!-- End Point from syntaxhighlihter 3.0 -->

  참고> 위의 코드는 다운로드 받은 코드의 “Index.html” 파일에 있는 코드이다.

           원래 코드에서 업로드위치만 Tistory의 것으로 변경해주었다.  이유는 Tistory에 images 폴더 위에 올리기 때문이다..  ^^

           예> “scripts/shCore.js"  ==> “./images/shCore.js”

 

2.3 TEST

2.3.1 삽입 코드

<pre class="brush: js;"> function helloSyntaxHighlighter() {     return "hi!"; } </pre>

 

2.3.2 결과 코드

function helloSyntaxHighlighter() 
{ 
    return "hi!"; 
}