Syntax Highlighter 3.0.83 적용!

by BLUEnLIVE | 2009/12/20 21:02

텍큐닷컴에서는 Syntax Highlighter를 지원한다. 비록 업데이트도 늦고(이건 뭐 파일만 바꿔치면 되는 건데... 쩝...) 한계도 좀 있지만, 고...


이미 이 바닥에선 살아있는 전설이 되어버린 Syntax Highlighter가 3.0으로 업데이트되었다. (이하 SH3이라 부름)


텍큐닷컴은 자체적으로 SH2를 지원하지만, 구버전인 2.0.320만 지원한다.
(지금은 2.1.364, 2.1.382를 거쳐 3.0.83까지 나왔음)

텍큐닷컴판 SH의 가장 큰 장점은 사용법이 무척 단순하다는 점이다.
코드를 입력한 뒤에 코드 앞뒤에 [code 언어] [/code]만 쓰면 끝이다.

하지만, 단순한 만큼 파라미터를 지정할 수 없고, 업데이트는 전무하다는 단점이 있다.
게다가 텍큐닷컴이 폐쇄 또는 합병의 절차를 밟고 있기 때문에 큰 것을 기대할 수도 없다.

몇 가지 상황을 고려해서, 아예 2.x 브렌치를 포기하고 3.x로 갈아타기로 했다.

3.0은 기존 버전에 비해 다음과 같은 개선이 있다.

1. 플래쉬 완전 제거

기존의 1.x, 2.x에서는 copy to clipboard 기능을 구현하기 위해 플래쉬를 사용했다.
하지만, 3.x에서는 플래쉬를 완전히 제거하고 브라우저의 기본적인 복사 기능만으로 이 기능이 동작하도록 구현했다.


2. 화면에서 코드 직접 선택 가능

2.x까지는 코드를 선택해보면 일부분만 선택되었다. (그래서 copy to clipboard 기능이 있었음)
하지만, 3.x에서는 원하는 범위까지 코드의 선택이 가능하다.

게다가 더블클릭하면 코드 전체를 선택해준다.


3. 자동 하이퍼링크 생성

코드 중에 하이퍼링크가 있으면 하이퍼링크를 클릭할 수 있도록 해준다.


4. XRegExp 사용

3.x는 정규식 확장 중 하나인 XRegExp를 사용한다.
(그래서 어쩌라고!)


5. CommonJS 완전 호환

(그래서 어쩌란 거냐고!)


6. CSS 지원 강화

CSS의 지원이 강화되었다. 게다가 SASS 3.0도 지원한다.
(다시 한번 말하는데, 그래서 어쩌란 거냐고!!!)


그런데, 이 SH3를 텍큐닷컴에서 그대로 사용할 수 없다.
적용은 가능하지만, 일부 코드가 정상적으로 출력되지 않는다.

그래서 약간의 수정을 가했다.

1. 치환자 입력을 위해 \#를 #로 변환

기존의 티스토리/텍스트큐브 용 SH에서도 적용했던 건데, 지금 와서 없애긴 뭣해서 다시 적용했다.
\#라고 입력하면 #로 출력해준다.
즉, [#\#_HELLO_#\#]이라고 쓰면 [##_HELLO##_]와 같은 치환자로 변신하는 것이다.


2. 코드 맨 앞과 맨 뒤의 <br /> 또는 엔터 제거

왜 생기는지는 모르겠지만, 가끔 이런 형태가 생기는 경우가 있더라.
그래서, 코드 맨 앞뒤에 엔터나 <br />이 있는 경우 제거하도록 했다.


설치하는 방법은 아래와 같다.

1. 파일 업로드

아래 파일을 다운받아 압축을 푼 뒤에 스킨 편집 → 파일 업로드를 통해 업로드한다.

SH30.zip


2. 스킨 수정

아래의 코드를 스킨에 삽입한다.

여기서 주의할 점이 몇 가지 있다.


a. <body>에 코드를 삽입해야 함

<head>가 아니라 <body>의 맨 앞에 넣어야 한다.
텍스트큐브닷컴은 <head> 내에 자바 스크립트 코드를 집어넣으면 씹어먹는다.


b. css는 소문자로 업로드 됨

이것 역시 텍스트큐브닷컴의 특성인데, 이미지 파일은 파일명이 그대로 유지되는 것에 비해, css 파일은 소문자로 바뀌어 올라간다.


c. 블로그 이미지 주소를 찾아서 적어야 함

텍스트큐브의 문제점 중 하나인데, 주소에 "./images/"를 적으면 제대로 인식하지 않는다.
그래서, 블로그 이미지 주소를 찾아서 직접 적어줘야 한다.

※ 류청파(koc/SALM) 님이 피를 토하며 댓글을 달고, 관련 글을 쓰셨다. ./images를 적으면 된다고.
하지만, 이론은 이론일 뿐 실제로 적용해보지 않은 이론은 별 쓸모 없더라.
여전히 텍스트큐브닷컴은 종종 상대주소를 인식하지 못한다.

<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shCore.gif"></script>

<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushMsx.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushAvs.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushNasm8086.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushAS3.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushBash.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushColdFusion.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushCpp.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushCSharp.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushCss.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushDelphi.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushDiff.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushErlang.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushGroovy.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushJava.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushJavaFX.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushJScript.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushPerl.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushPhp.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushPlain.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushPowerShell.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushPython.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushRuby.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushSass.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushScala.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushSql.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushVb.gif"></script>
<script type="text/javascript" src="http://블로그 이미지 주소/images/j_shBrushXml.gif"></script>

<link type="text/css" rel="stylesheet" href="http://블로그 이미지 주소/shthemedefault.css"/>
<link type="text/css" rel="stylesheet" href="http://블로그 이미지 주소/shcoredefault.css"/>

<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>


덧1. SH3는 계속 업데이트 되고, 새로운 테마와 언어 파일을 받을 수 있다.
추가 다운로드는 SH3 홈페이지를 확인하기 바람.


덧2. 내 블로그에서는 주석이 잘못 표시되는 문제가 있었다.
확인해보니, 블로그 스킨(css)에 .comments의 display가 정의되어 있었다.
아래의 내용을 style.css에 추가해서 해결했다.

.syntaxhighlighter .comments {
    display:inline;
}

'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글

트위터 어플들아! 링크 규칙을 맞춰라! 특히 한글 해쉬태그!  (20) 2010.08.10
자바 스크립트에서 trim()에 대한 단상  (6) 2010.07.11
죽을 때가 되어가는 텍큐닷컴의 "트랙백 추천"의 압박  (19) 2010.05.10
텍큐닷컴이 문 닫으면 어디로 가야 하나?  (18) 2010.05.05
텍스트큐브닷컴은 아직도 2009년?  (15) 2010.04.13

티스토리툴바