Skip to content

[SyntaxHighlighter]TIP 블로그에 소스코드를 보기좋게 삽입하는 방법 블로그 이야기

2009.12.28 15:38 Winbi Edit

이글을 쓰는 이유

기존에 티스트로를 사용해 오다가 얼마전 토트 블로그로 넘어오면서 몇가지 불편한 점들을 느끼고 있다.

그중에 하나가 사용자들이 올려놓은 팁이 부족하다는 것이다.

티스토리는 이미지 파일외에도 다른 파일을 스킨편집시 업로드가 가능하지만 토트는 ㅠㅠ 이미지만 가능한것 같다.


이미 티스토리를 기준으로 올려진 글들은 많으니 나는 토트를 기준으로 SyntaxHighlighter를 사용하는 방법을 적어보려고 한다.

검색해서 안나오는걸 보면 내가 처음인가? ㅋㅋㅋ

아무쪼록 나처럼 삽질을 하지 않고 도움이 되길 바란다.


ㅋㅋㅋ 역시 이런게 있을줄이야

아래 댓글을 보시면 아시겠지만 이미 편리한 기능이 있네요

이 글은 토트블로그 외에 다른 블로그에서 활용할 수 있겠네요

토트 블로그 이용자 분들은 이 방법 쓰지 마세요 ㅋㅋ

SyntaxHighlighter 소개

SyntaxHighlighter는 JavaScript를 이용해서 소스코드에 스타일을 적용해서 보기좋게 하는 역할을 한다.

다운받을수 있는 주소 : http://alexgorbatchev.com/wiki/SyntaxHighlighter

예를 들면 아래와 같다.

img1.PNG

Here's an example(이렇게 입력을 하면) -> Will render as(렌디링 되고 나면 이렇게 보여주죠)

사용방법

복잡하게 설명 안드리고 그냥 제가 사용한 방법을 알려드리겠습니다.

토트 관리자페이지 > 디자인 > HTML/CSS편집 에서 Html소스중 Body가 끝나는 부분 뒤에 아래의 소스를 삽입합니다,

여기서 팁은 해당 소스의 경로 입니다.

티스토리의 경우를 예로들면 소스를 업로드해서 경로를 지정하는데(이게 무슨말이야? 라고 생각되시면 패스!!)

토트의 경우는 그것이 안되므로 SyntaxHighlighter 를 배포하는 홈페이지의 소스의 경로를 직접 걸어서 사용했습니다.

(더 좋은 방법이 있으면 답글 남겨주세요)


또 한가지의 팁은 글을쓸때 에디터를 "단락별 편집기"로는 사용이 안되고요

저같은 경우는 관리자 > 쓰기환경 설정 > 기타 편집기(xpresseditor) 로 변경한 후 HTML모드에서 입력을 했습니다.

아마도 HTML모드가 지원되는 편집기이면 모두 될것 같습니다.


이게 무슨 말인지 모르시겠으면 아래와 같이 따라하시면 됩니다.


1. HTML/CSS 편집에서 아래의 코드를 삽입한다.



 <script type="text/javascript" src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shCore.js"></script>

<script type="text/javascript" src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushJScript.js"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushBash.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushDelphi.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushDiff.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushGroovy.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushPlain.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushRuby.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushScala.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushJavaFX.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushPerl.js" type="text/javascript"></script>
<script src="http://bitbucket.org/alexg/syntaxhighlighter/raw/3a2e3fe04d01/Scripts/shBrushPowerShell.js" type="text/javascript"></script>


2. 새글쓰기 에서 HTML 모드로 선택 한 후 아래의 코드를 입력한다.

    
 /**
     * SyntaxHighlighter
     */
    function foo()
    {
        // it works!
    }

설명이 부족한 느낌이 드는데 질문은 답글로 남겨주세요

Share
1
이 글과 관련된 글
  1. [2010/06/27] 소스코드 Syntax Highlighter by 고집불통 때쟁이 (1083)
  2. [2010/04/29] 결국, 5월 1일부터 중국 조달시 소스코드 의무제출 시행 by 떡이떡이 (2976)
  3. [2007/01/02] PHP소스 - 디렉토리 경로만으로 새 디렉토리 생성(하위디렉토리 포함) by Cacti (0)
Tag :
,  , 

Leave Comments

최근 글

태그

분류

T-NAVI