티스토리에 구문강조가 적용된 소스코드 삽입하는 방법

블로그 특성상 소스코드를 붙여넣는 경우가 많은데, 

티스토리에는 자체 소스편집기(애디터)가 없기 때문에, 나는 주로 글상자에 소스코드를 붙여넣는 방법을 사용했다.

짧은 테스트 코드를 여러개 붙여 넣을때는 글상자를 이용한 방법이 그런데로 편한 방법이지만

긴 코드나 IDE 별로 복사한 소스코드의 구문 강조가 그대로 복사되지 않는 경우도 발생했다.

소스코드가 한화면에 들어올 정도의 길이라면 화면 캡쳐도 괜찮은 방법인 듯 하다.

검색을 해보니 사용할 만한 방법이 두 가지정도 있었다. (더 있겠지만, 검색을 더 하지 않았다.....)

두 가지를 써보고 주관적인 느낌을 작성해본다.

SyntaxHighlighter 

1. 적용방법

1) SystaxHighlighter 홈페이지 접속 후, 다운로드

- SystaxHighlighter 홈페이지: http://alexgorbatchev.com/SyntaxHighlighter

- SystaxHighlighter 다운로드: http://alexgorbatchev.com/SyntaxHighlighter/download/

2) 다운로드 받은 파일을 압축 해제 후 Styles폴더, Scripts 폴더 안의 파일을 티스토리에 추가

- SyntaxHighlighter 압축 해제

- Scripts, Styles 파일 업로드 (관리페이지 - 꾸미기 - HTML/CSS - 파일업로드)

- 파일을 업로드 하면 파일의 경로는 './images/파일이름'이 된다.

3) 티스토리 Skin 소스코드에 SyntaxHighlighter 스크립트 추가 (관리페이지 - 꾸미기 - HTML/CSS)

- 관리페이지 - 스킨 - HTML/CSS 페이지로 이동하여 skin.html에서 /body 키워드 검색

- 아래의 코드를 </body>태그 위에 추가 

syntaxhighlighter_3.0.83.txt

<!-- syntaxhighlighter_3.0.83 적용 코드 시작 -->

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

<script type="text/javascript" src="./images/shLegacy.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 type="text/css" rel="stylesheet" href="./images/shCoreEmacs.css">

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

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

<!-- syntaxhighlighter_3.0.83 적용 코드 끝 -->

- 위의 소스 코드에서 중요한 코드는 테마적용 코드, 원하는 테마코드로 설정할 것.

(디폴트 코드는 shCore,css, shThemeDefault.css)

(테마코드 및 테마 미리보기: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/)

2. 티스토리에 소스코드 삽입(작성)

1) 소스코드 삽입

- 소스코드는 Html 방식으로 글쓰기에서 아래 태그 안에 작성하고자하는(구문강조 테마를 적용하고자 하는) 소스코드를 삽입한다.

- 언어에 따라 코드 부분에서 brush 부분을 달리 해주면 된다.

<pre class="brush:py">

... 소스 코드 작성 ...

</pre>

- brush 종류 참조: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3. 소스코드 삽입 결과

- python 소스코드 삽입 결과 예시

'''
Created on 2015. 7. 1.

@author: eunguru
'''
import glob, os.path

ndir = nfile = 0    # 합계 출력을 위한 변수 

def traverse(dir, depth):
    global ndir, nfile
    
    for obj in glob.glob(dir + '/*'):
        if depth == 0:
            prefix = '|--'
        else:
            prefix = '|' + '    ' * depth + '|--'
        
        # 디렉토리인 경우 
        if os.path.isdir(obj):
            ndir += 1
            print(prefix + os.path.basename(obj))
            # 하위 디렉토리의 파일, 디렉토리 출력을 위해 재귀함수 호출 
            traverse(obj, depth+1)
        
        # 파일인 경우 
        elif os.path.isfile(obj):
            nfile += 1
            print(prefix + os.path.basename(obj))
        
        # 그 외의 경우 처리 
        else:
            print(prefix + 'uknown object :', obj)

if __name__ == '__main__':
    path = '..' # 경로 지정 
    print('path:', os.path.abspath(path))
    
    traverse(path, 0)
    # 전체 합계 출력 
    print('\n', ndir, 'directories,', nfile, 'files')

- 글 작성 중에는 아무것도 보이지 않거나 구문 강조가 적용되지 않은 코드처럼 보임(즉, 위와 같이 보이지 않음) 미리보기나 작성이 완료되면 위와 같이 보임

4. 장,단점

1) 장점

- 각 언어별로 구문강조가 잘 적용되어 보여짐

- 소스코드가 예쁘게 보임

- 여러가지 테마를 제공함

2) 단점

- 모바일 웹에서는 구문강조 적용되지 않음

- 한 글에 짧은 소스코드가 여러번 삽입될 때는 글상자를 이용한 방법이 더 유용

- 스크립트, 스타일 시트를 이용한 방법이므로 페이지 로딩 속도를 저하시킬 수 있음

- html 코드로 적용해야 되므로 글 편집이 복잡함

- 티스토리에 구문강조를 위해 파일 업로드 및 스킨 소스코드 수정이 필요함

총평: 글 하나당 긴 소스코드 한, 두개 삽입시 적용할 만한 방법인 것 같음

Color Scripter

1. 적용방법

1) Color Scripter에 접속한다.

- Color Scripter 사이트 주소: http://colorscripter.com

2) 언어, 테마등을 설정하고 삽입할 소스코드를 복사한다. (실시간 하이라이팅에 체크되어 있어야 함)

3) 클립코드에 복사 버튼을 클릭하여 소스코드를 복사하여 블로그에 붙여넣는다.

2. 소스코드 삽입 결과

- 글 작성중에도 소스코드가 구문강조 되어 보임

- python 소스코드 삽입 결과 예시

'''
Created on 2015. 7. 1.

@author: eunguru
'''
import glob, os.path
 
ndir = nfile = 0    # 합계 출력을 위한 변수 
 
def traverse(dir, depth):
    global ndir, nfile
    
    for obj in glob.glob(dir + '/*'):
        if depth == 0:
            prefix = '|--'
        else:
            prefix = '|' + '    ' * depth + '|--'
        
        # 디렉토리인 경우 
        if os.path.isdir(obj):
            ndir += 1
            print(prefix + os.path.basename(obj))
            # 하위 디렉토리의 파일, 디렉토리 출력을 위해 재귀함수 호출 
            traverse(obj, depth+1)
        
        # 파일인 경우 
        elif os.path.isfile(obj):
            nfile += 1
            print(prefix + os.path.basename(obj))
        
        # 그 외의 경우 처리 
        else:
            print(prefix + 'uknown object :', obj)
 
if __name__ == '__main__':
    path = '..' # 경로 지정 
    print('path:', os.path.abspath(path))
    
    traverse(path, 0)
    # 전체 합계 출력 
    print('\n', ndir, 'directories,', nfile, 'files')

3. 장,단점

1) 장점

- 각 언어별로 구문강조가 잘 적용되어 보여짐

- 소스코드가 예쁘게 보임

- 소스코드를 블로그에 삽입하는 과정이 비교적 간편

2) 단점

- 모바일 웹에서도 구문 강조된 코드가 보이긴 하지만, 크기가 모바일 웹에 맞게 변동되지 않음

- 한 글에 짧은 소스코드가 여러번 삽입될 때는 글상자를 이용한 방법이 더 유용

- 스크립트, 스타일 시트를 이용한 방법이므로 페이지 로딩 속도를 저하시킬 수 있음

- 구문강조를 지원하는 언어, 테마가 제한적

- 소스코드의 가로길이에 따라 가로크기가 유동적

총평: 글 하나당 긴 소스코드 한, 두개 삽입시 적용할 만한 방법인 것 같음