Being a Developer: Tistory에 SyntaxHighlighter 2.0 적용하기

2.0이 발표되고 내용을 살펴 보았다.

뭐가 크게 바뀌었나 설치를 해 보고 싶었는데 기존 1.5.1 버전을 삭제하고 다시 할 경우 호환이 되는지를 먼저 파악해야 했다. 2.0으로 업데이트 하면서 기존의 글들을 수정해야 된다면 여간 큰일이 아닐 수 없기 때문이다.

다행이 2.0에서 하위 호환성을 지켜주고 있었다. 1.5 버전을 위한 shBrushBash.js 를 포함시켜주고 이전의 Highlighter 적용 코드를 추가 해 주면 된다. 그에 대한 자세한 내용을 이 글 마지만에 다시 언급 하겠다.

우선 2.0 을 Tistory에 적용하는 방법은 두 가지가 있다.

소스 코드를 직접 올려서 적용하는 방법과 SyntaxHighlighter Project 페이지에서 호스팅하는 소스를 호출해 주면 된다.

먼저 소스 코드를 직접 올리는 방법이다.

SyntaxHighlighter 2.0 소스를 다운로드 받아서 scripts 와 styles 폴더의 모든 파일을 스킨 편집의 직접 올리기를 통해 업로드 한다.

scripts 와 styles 폴더의 파일 구성 보기

그리고 스킨의 HTML/CSS 소스 수정에서 Head tag 를 닫기 전에 아래의 코드를 추가해 준다.

<head>
:
    <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="styles/shCore.css">
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css">
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
</head>

이제 SyntaxHighlighter 를 사용할 준비가 되었다.

다음으로 SyntaxHighlighter project 페이지에서 제공하는 호스팅 서버에서 소스를 받아 사용하는 방법이다. 파일을 직접 올리기 귀찮은 사람은 이 방법이 더 편할 것이다.

호스팅 주소는 http://alexgorbatchev.com/pub/sh/[VERSION] 이고 현재 마직막 버전은 2.0.278 으로 정확한 주소는 http://alexgorbatchev.com/pub/sh/2.0.278/ 이다.

따라서 javascript 주소를 베이스를 위의 주소로 설정해 주면 된다.

<head>
:
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
</head>

그리고 아래 코드로 테스트 해 본다.

<pre class="brush: js">
    alert("Hello world");
</pre>

위의 코드는 2.0에서 지원하는 코드이지만 tistory 에서는 1.5 버전에서 사용하던 방식인 TEXTAREA 태그를 활용하는 것이 HTML 편집과 위지윅 편집을 번갈아 가면서 편집하는데 더 편하다.

<textarea name="code" class="js" rows=3 cols=30>
    alert("Hello world");
<textarea>

마지막으로 1.5.1 버전으로부터 업그레이드할 경우 몇 가지 알아 두어야 할 사항이 있다.

1.5.1 버전을 사용할 때 작성한 코드가 실행 되게 하기 위해서는 brush Script 중에서 shLegacy.js 를 호출 해 주어야 하고 BODY 태그의 OnLoad 에 Syntax Highlighter 를 적용하는 코드를 추가해 주어야 한다.

<head>
:
:
    <script type="text/javascript" src="images/shLegacy.js"></script>
:
:
</head>
<body OnLoad="dp.SyntaxHighlighter.HighlightAll('code');">

그리고 Brush Alias 가 바뀐 내용도 알아 두어야한다. 이전에 Brush Alias로 class="c++" 나 class="c#" 을 사용했을 경우 "cpp" 와 "csharp" 으로 바꾸어 주어야 한다. 자세한 내용은 아래 페이지를 참고 하면 된다.

1.5 버전의 지원 언어와 Alias : http://code.google.com/p/syntaxhighlighter/wiki/Languages

2.0 버전의 지원 언어와 Alias : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
Original Post : http://neodreamer-dev.tistory.com/248

Being a Developer

2009/02/04

Tistory에 SyntaxHighlighter 2.0 적용하기

No comments :

Post a Comment

Blog Archive