Syntaxhightlighter 2.x 사용하기

Syntaxhighlighter 2.x가 있는 것을 알았습니다. 그래서, 적용해보습니다. 안됩니다. ㅠ.ㅠ 열불납니다. 다시 1시간여의 삽질끝에 어느정도 정리가 되네요.

결론을 이야기 하면 혹시 스프링을 사용하면 티스토리로 올리시는 분은 그다지 보기는 좋지 않습니다. 즉

태그는 안되기 때문에 그대로 보이네요.

작성:http://ospace.tistory.com/(ospace114@empal.com) 2009.11.13

설정하기

이번에 실제 사용하는 방법을 보겠습니다.

이런저런님에 따르면 이번 버전 2.0 에서는 태그방식이 아닌 텍스트 방식으로 되어 있다고 합니다. 즉, 이전에는 특정 태그에 맞춰서 highlight를 줬다면, 이번에는 특정 태그 안에 있는 모든 내용을 highlight을 줬다는 것입니다.

필수로 필요한 파일은 다음과 같습니다. syntaxhighlighter_2.x은 다운로드 받을 파일을 압출을 풀었을 때의 폴더입니다.

syntaxhighlighter_2.x\scripts\clipboard.swf
syntaxhighlighter_2.x\scripts\shCore.js
syntaxhighlighter_2.x\scripts\shLegacy.js
syntaxhighlighter_2.x\styles\help.png
syntaxhighlighter_2.x\styles\magnifier.png
syntaxhighlighter_2.x\styles\page_white_code.png
syntaxhighlighter_2.x\styles\page_white_copy.png
syntaxhighlighter_2.x\styles\printer.png
syntaxhighlighter_2.x\styles\shCore.css
syntaxhighlighter_2.x\styles\shThemeDefault.css

다음은 자신이 필요로 하는 언어에 따라서 선택적으로 올리셔도 됩니다.

syntaxhighlighter_2.x\scripts\shBrushAS3.js
syntaxhighlighter_2.x\scripts\shBrushBash.js
syntaxhighlighter_2.x\scripts\shBrushColdFusion.js
syntaxhighlighter_2.x\scripts\shBrushCpp.js
syntaxhighlighter_2.x\scripts\shBrushCSharp.js
syntaxhighlighter_2.x\scripts\shBrushCss.js
syntaxhighlighter_2.x\scripts\shBrushDelphi.js
syntaxhighlighter_2.x\scripts\shBrushDiff.js
syntaxhighlighter_2.x\scripts\shBrushErlang.js
syntaxhighlighter_2.x\scripts\shBrushGroovy.js
syntaxhighlighter_2.x\scripts\shBrushJava.js
syntaxhighlighter_2.x\scripts\shBrushJavaFX.js
syntaxhighlighter_2.x\scripts\shBrushJScript.js
syntaxhighlighter_2.x\scripts\shBrushPerl.js
syntaxhighlighter_2.x\scripts\shBrushPhp.js
syntaxhighlighter_2.x\scripts\shBrushPlain.js
syntaxhighlighter_2.x\scripts\shBrushPowerShell.js
syntaxhighlighter_2.x\scripts\shBrushPython.js
syntaxhighlighter_2.x\scripts\shBrushRuby.js
syntaxhighlighter_2.x\scripts\shBrushScala.js
syntaxhighlighter_2.x\scripts\shBrushSql.js
syntaxhighlighter_2.x\scripts\shBrushVb.js
syntaxhighlighter_2.x\scripts\shBrushXml.js

마지막으로 사용하고픈 테마를 올리는 부분입니다.

syntaxhighlighter_2.x\styles\shThemeDjango.css
syntaxhighlighter_2.x\styles\shThemeEclipse.css
syntaxhighlighter_2.x\styles\shThemeEmacs.css
syntaxhighlighter_2.x\styles\shThemeFadeToGrey.css
syntaxhighlighter_2.x\styles\shThemeMidnight.css
syntaxhighlighter_2.x\styles\shThemeRDark.css

티스토리에 올리는 자세한 방법은 참조[3]을 보시길 바랍니다.

그리고 다음은 다 올리시면 다음을 홈페이지 내용에 추가해야 됩니다. 티스토리인 경우는 자체 스타일 편집 기능이 있어서 html파일에 내용을 추가할 수 있습니다. 주의할 것은 아래 src="scripts/shCore.js"에서 "scripts"를 업로드한 사이트의 주소에 맞춰서 수정해야 합니다. 티스토리인 경우는 업로드되는 부분은 images라는 곳에 되기 때문에 "scripts"대신에 "./images"로 수정해주면 됩니다.
즉
```
<script type="text/javascript" src="./images/shCore.js"></script>
```
로 됩니다.
```
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SyntaxHighlighter Build Test Page</title>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="scripts/shBrushCSharp.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.config.clipboardSwf = 'scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
</head>
```
여기까지 되었으면, 아래와 같이 본문에 사용할 코드를 추가하면 됩니다. 아래 예제 코드는 Syntaxhighlighter의 예제 코드입니다.
```
<pre class="brush: c-sharp;">
function test() : String
{
    return 10;
}
</pre>
```
그 결과 화면은 아래와 같다.

여기까지가 일반적인 Syntaxhighlighter의 변경된 환경 구성 및 사용법입니다. 이전 스프링노트에서 티스토리로 업로드할 경우 사용했던 OL 태그를 사용한 방법을 살펴보겠다. SyntaxHihglighter 오자가 있군요. 수정하기 귀찮군요. 중요한 것이 아니니깐 그냥 넘어가도록 하죠. 원래 예제 소스 자체에 오자가 있던 것입니다.

이전 버전 사용하기

OL 태그를 사용하려면 이전 버전과 호환성을 가져야 한다. 현재 버전에서는 하나의 테그만 등록하게 되었다. 기본 설정값은 PRE 태그이다. 이전처럼 TEXTAREA 태그를 사용할 수 없다. 그리고 중복해서도 사용할 수 없다. 그러나 다행스러운 것은 Syntaxhighlighter가 이전 버전을 지원하다는 것이다.

먼저 이전 버전을 지원하도록 수정하고, 차후에 OL 태그도 적용하도록 하겠습니다.

먼저 이번에 사용할 테스트 예제 코드입니다. OL, TEXTAREA, PRE 태그를 사용한 예입니다. OL 태그인 경우는 이전 버전의 방식과 현재 2.x에 변경된 방식으로 작성해보았습니다.
```
<ol class="brush: c-sharp;">
<li>
function test() : String
{
    return 10;
}
</li>
</ol>

<ol name="code" class="c-sharp">
<li>
function test() : String
{
    return 10;
}
</li>
</ol>

<textarea name="code" class="c-sharp" cols="60" rows="5">
function test() : String
{
    return 10;
}
</textarea>

<pre class="brush: c-sharp;">
function test() : String
{
    return 10;
}
</pre>
```
그럼 일단 이전 기본 환경 설정했던 것으로 살펴보겠습니다. 앞부분 3개는 태그 그대로만 보이고 PRE 태그로 된 코드만 제대로 하이라이트가 되었네요.

결론만 이야기 하면, 첫번재 예제 코드는 하이라이트가 안됩니다. 다음 두개 예제 코드 만이 이전 버전 지원에 의해서 제대로된 하이라이트가 됩니다. 그럼 설정을 변경해보겠습니다.

여기서 필요한 추가 파일이 "script" 폴더에 "shLegacy.js"이 필요 합니다. 이분을 적당한 위치에 추가해줍니다. 저는 shCore.sh 다음에 위치시켰네요.

그리고 추가로 필요 한 것이 "dp.SyntaxHighlighter.HighlightAll('code');"을 스크립트에 추가해줍니다. 아래 굵은 글씨로 표시된 부분이 추가해준 부분입니다.
```
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shLegacy.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.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.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
    dp.SyntaxHighlighter.HighlightAll('code');
</script>
```
여기서 주의할 것은 2.x 버전에서는 HEAD 태그 안에 넣어줘도 잘 동작했지만, 이전 1.5대 버전에서는 제대로 하이라이트가 안됩니다. 보통 본문의 제일 마지막에 위치시킵니다.
```
<head>
    <title> .... </title>
</head>
<body >

...  중략 ...



</body>
</html>
```
위의 Syntaxhighlighter에 추가해줍니다. 그렇지 않으면 Syntaxhighlighter 이후에 추가된 코드들에 대해서는 제대로된 하이라이트가 적용되지 않을 수 있다. 이는 이전 버전으로 인해서 수정하는 부분으로 이전 형식을 사용하지 않으시는 분은 수정할 필요가 없습니다.

결과를 보면 TEXTAREA 태그만 하이라이트되었다. OL을 사용해보겠습니다.

OL 태그도 적용해보기

OL 태그를 적용하기 위해서는 코드 수정이 필요하다. script 폴더에 있는 js파일은 변경된 파일이라서 바로 수정이 어렵다. src 폴더에 보면 shCore.js와 shLegacy.js가 있다. 이들 소스는 수정할 수 있다. 제가 수정한 파일은 shLegacy.js입니다. 이전에 스프링노트에서 티스토리로 업로드하여 하이라이트 해보신 분이라면 무엇인지 바로 이해될 겁니다.

아래 소스를 보면 굵게 표시된 부분이 새로 추가된 코드입니다.
```
var elements = [],
    highlighter = null,
    registered = {},
    propertyName = 'innerHTML';

// for some reason IE doesn't find <pre/> by name, however it does see them just fine by tag name...
findTagsByName(elements, name, 'pre');
findTagsByName(elements, name, 'textarea');
findTagsByName(elements, name, 'ol');

if (elements.length === 0)
    return;       
```
그럼 앞에서 올린 shLegacy.js 대신에 src에 있는 shLegacy.js를 사용하면 됩니다. 결과는 다음과 같습니다.

역시 LI 태그가 그대로 보이네요. 지금은 한군데만 사용되어 눈에 거슬리지만 볼만합니다. 그러나 좀 많이 사용되었다면 여기저기 보이겠죠. 보여지는 코드 길이도 좀 늘어나네요.

2.x 버전에서는 wrap-lines가 있어서 화면이 다 표시되지 않은 부분을 스크롤하지 않고 다음 줄로 설정할 수도 있네요.

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration 에서 설정가능한 값들을 볼 수 있습니다.
```
SyntaxHighlighter.defaults['tab-size'] = 4;
SyntaxHighlighter.defaults['wrap-lines'] = false;
```
혹은 설정은 PRE 태그의 파라미터로 추가할 수 있다.
```
<pre class="brush: c-sharp; tab-size: 4; wrap-lines: false"> ... </pre>
```
결론

Syntaxhighlighter 2.x 버전의 아쉬움은 OL 태그에 의해 표시되는 경우 LI 태그가 보인다는 것이네요. 그 것말고는 대부분 만족스럽네요. 이전 버전 호환을 위해서 약간의 수정이 필요하다는 불편함이 있군요. 이전에 올린 모든 예제 코드들을 찾아서 수정하려고 하니 머리가 아프네요. 일단은 이전 버전 호환을 지원해서 사용하는 것이 좋을 같습니다. 이글을 작성하면서 코드를 보았는데 많이 세련되고 잘 정리된 느낌을 받았습니다. 기회가 되면 어떤식으로 하이라이트를 구현했는지 살펴보아야겠군요.Ospace.

참조

[1] alex.gorbatchev, SyntaxHightlighter(old),http://code.google.com/p/syntaxhighlighter/

[2] Alex Gorbatchev, SyntaxHightligher, http://alexgorbatchev.com/wiki/SyntaxHighlighter

[3]신규하, SyntaxHighlighter 2.X를 tistory에 적용하기, http://gyuha.tistory.com/225

[4] 이런저런, Syntax Highlighter 2.0 적용, http://dis1.tistory.com/entry/Syntax-Highlighter-20

'4.개발 및 운영 환경' 카테고리의 다른 글

Xwindow에서 한글 폰트 (0)	2010.03.26
D-Bus란 (0)	2010.03.18
SVN for Visual Studio (0)	2009.11.03
계속 추가되는 값의 평균계산하기 (0)	2009.10.09
시간 연산하기 (0)	2009.10.09

JaPa2

Syntaxhightlighter 2.x 사용하기

설정하기

이전 버전 사용하기

OL 태그도 적용해보기

결론

참조

'4.개발 및 운영 환경' 카테고리의 다른 글

티스토리툴바

Syntaxhightlighter 2.x 사용하기

설정하기

이전 버전 사용하기

OL 태그도 적용해보기

결론

참조

'4.개발 및 운영 환경' 카테고리의 다른 글

'4.개발 및 운영 환경' Related Articles

티스토리툴바