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도 지원한다.
(다시 한번 말하는데, 그래서 어쩌란 거냐고!!!)
기존의 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 />이 있는 경우 제거하도록 했다.
기존의 티스토리/텍스트큐브 용 SH에서도 적용했던 건데, 지금 와서 없애긴 뭣해서 다시 적용했다.
\#라고 입력하면 #로 출력해준다.
즉, [#\#_HELLO_#\#]이라고 쓰면 [##_HELLO##_]와 같은 치환자로 변신하는 것이다.
2. 코드 맨 앞과 맨 뒤의 <br /> 또는 엔터 제거
왜 생기는지는 모르겠지만, 가끔 이런 형태가 생기는 경우가 있더라.
그래서, 코드 맨 앞뒤에 엔터나 <br />이 있는 경우 제거하도록 했다.
설치하는 방법은 아래와 같다.
1. 파일 업로드
SH30.zip2. 스킨 수정
아래의 코드를 스킨에 삽입한다.
여기서 주의할 점이 몇 가지 있다.
a. <body>에 코드를 삽입해야 함
<head>가 아니라 <body>의 맨 앞에 넣어야 한다.
텍스트큐브닷컴은 <head> 내에 자바 스크립트 코드를 집어넣으면 씹어먹는다.
b. css는 소문자로 업로드 됨
이것 역시 텍스트큐브닷컴의 특성인데, 이미지 파일은 파일명이 그대로 유지되는 것에 비해, css 파일은 소문자로 바뀌어 올라간다.
c. 블로그 이미지 주소를 찾아서 적어야 함
텍스트큐브의 문제점 중 하나인데, 주소에 "./images/"를 적으면 제대로 인식하지 않는다.
그래서, 블로그 이미지 주소를 찾아서 직접 적어줘야 한다.
※ 류청파(koc/SALM) 님이 피를 토하며 댓글을 달고, 관련 글을 쓰셨다. ./images를 적으면 된다고.
하지만, 이론은 이론일 뿐 실제로 적용해보지 않은 이론은 별 쓸모 없더라.
여전히 텍스트큐브닷컴은 종종 상대주소를 인식하지 못한다.
여기서 주의할 점이 몇 가지 있다.
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;
}
[quote]코드 맨 앞뒤에 엔터나 <br />이 있는 경우 제거[/quote]
답글삭제그런데 일부러 넣는 경우는 어찌해야 하나요?
자동 제거의 경우 <br /> 태그를 나타낼 수 없는 희안한 상황이 생길 수도 있습니다(현재 텍큐의 하일라이터가 그 버그를 갖고 있죠). 신택스 하일라이터가 신택스를 못 나타낸다는 조커님이 지적하신 그 이상한 경우가 발생하죠.
(1)
답글삭제[code html]
HTML 코드
[/code]
위 코드를 신택스 하일라이터로 나타낼 수는 없나요? 위에서 말한 #\# 방식이면 어떻게 될 것 같은데...
(2)
[code html] 를 꼭 <pre class="brush:html"> 코드로 변환해야 하나요? 그냥 <script type="syntaxhighlighter" class="brush:html"><![CDATA[ 방식으로 바로 변환하면 안 되나요?
3.0 버전에서 화면 깜박임이 좀 심각하네요. 컴퓨터가 느려서 그런가? 아니면 램이 부족해서 그런가?
덧// "./images/" 문제는 잘 되면 감사, 안 되면 그러려니 해야 할 문제로 보입니다. 텍스트큐브도 티스토리도 이 문제는 해결해 주지 않더군요.
덧/덧// 오랜만에 와서는 문젯거리만 잔뜩 남기고 갑니다. ^^a
@류청파(koc/SALM) - 2010/07/12 09:46
답글삭제일부러 넣은 코드는 <br /> 의 형태로 저장되고,
자동으로 넣은 엔터는 <br /> 형태로 저장되니 별 문에 없을 것 같습니다.
물론 <br />는 제거하지 않습니다.
@류청파(koc/SALM) - 2010/07/12 10:13
답글삭제1. 방법은 있어요.
코드를 읽어 일괄 치환해준 다음에 다시 한번 SH로 변환시키면 될 겁니다.
비슷한 동작을 시키는 코드도 본 적이 있구요. (jQuery 사용)
전 걍 백업파일을 읽어서 자동으로 변환해주는 프로그램을 하나 만들었습니다.
그게 더 깔끔한 것 같더군요.
2. 시험삼아 <script> 태그를 써봤는데, 변환이 완료되기 전에 해당 위치에 아무것도 표시되지 않는 점이 좀 갑갑하더군요.
개인적으로는 <script>보단 <pre>를 더 선호하는 쪽입니다.
3. /.images/ 는 그래도 티스에선 꽤 잘 동작하는 편입니다.
적어도 Syntax Highlighter를 포함한 JS 코드에선 말이죠.
이놈의 텍큐닷컴...
@UO런치패드 - 2010/07/13 16:35
답글삭제1. stripBrs는 그냥 <br /> 태그를 없애주는 겁니다.
2. shAutoloader.js 파일을 읽어보시면 나옵니다. 간단히 설명하면, 브러쉬 js 파일을 필요할 때만 읽어들이는 겁니다.
아아아 결국 블루앤라이브 님이 배포를 시작했으니 저는 저는 저는 (응?)
답글삭제@Un-i-que - 2010/07/14 22:16
답글삭제선착순의 의미란 이런 것이죠. ㅎㅎ
텍큐닷컴용이죠.티스토리도 이걸 사용할수 있는건가요?
답글삭제@demun - 2010/07/23 07:45
답글삭제그냥도 적용이 가능하지만, 파일명을 제대로 바꿔서 적용하는 게 좋을 듯 합니다.
텍큐닷컴은 이런저런 제약이 있어서 파일명을 좀 요상하게 만들었습니다.
@BLUEnLIVE - 2010/07/13 23:22
답글삭제shAutoloader.js 파일 설치법이 [ur=http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html]홈페이지[/ur]에 올라왔네요.
처음에는 없었는데요.
아 맞다 티스토리용은 제가 배포하겠어요~[emo=027]
답글삭제다 써 놓고 짜증나서 안 올렸던 포스팅 지금 당장 올려야겠습니다.
@Un-i-que - 2010/08/01 13:09
답글삭제수고하셨습니다~ ^^
@BLUEnLIVE - 2010/08/02 10:31
답글삭제아 그런데 치환자 부분에서 오타가 있습니다...
그리고 제 글 보고 제가 잘못한 짓이 있는지 좀 봐 주시겠어요? (ㅎ)
그리고 어셈블리어 브러시는 그냥 블루앤라이브 님 것으로 올려 주시는 게 좋겠어요.
완성도에 있어서 그게 더 낫고 저는 3.0에 맞게 브러시 수정해서 공개할 생각이라서...[emo=017]
티스토리용 치환자가 본문에 출력되게끔하려면 어느 파일의 어디를 수정하면 되나요?
답글삭제#\# 이런식으로 표기하면 본문에 치환자가 출력이 되잔아요....그런데 어디를 수정해야하는지를 모르겠네요.
@demun - 2010/10/09 16:18
답글삭제압축되지 않은 소스 기준으로
[code]
if (sh.config.bloggerMode == true)
str = str.replace(br, '\n');
[/code]
를
[code]
if (sh.config.bloggerMode == true)
str = str.replace(br, '\n').replace(/\\#/g, '#');
[/code]
와 같이 수정하면 됩니다.
@BLUEnLIVE - 2010/10/10 14:08
답글삭제shCore.js 파일안에 그와같은 구문이 있군요.
그런데 알려주신대로 변경한다음 해보니 적용이 안되는거 같네요.
혹 다른부분도 수정을 해야 되는지요?
@demun - 2010/10/09 16:18
답글삭제아닙니다. 저거 하나면 충분합니다. F5 신공이면 충분할 것 같아요.