- 티스토리에 Syntax Highlighter 3.0.83 적용하기
- 컴퓨터야그/블로그 관련
- 2011. 4. 15. 10:35
Syntax Highlighter는 현재 3.0.83까지 공개되었다.
텍스트큐브닷컴에 적용하는 방법을 공개했지만, 텍큐닷컴은 곧 폐쇄 예정이고, 티스토리엔 적용법이 약간 달라 다시 포스팅한다.
일단, 3.0은 2.x대에 비해 다음과 같은 개선이 있다.
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 />이 있는 경우 제거하도록 했다.
3. bloggerMode시 <br> 정상처리
티스토리에서 <br> 태그를 정상적으로 처리하려면 bloggetMode를 true로 설정해야 한다.
그런데, 문제는 이렇게 하면 <br> 외에도 <br>도 엔터로 처리한다.
코드 일부를 수정해서 <br>는 처리하지 않도록 수정했다.
따라서, html 코드나 sami 자막에서 <br> 태그를 표현할 수 있다.
기존의 티스토리/텍스트큐브 용 SH에서도 적용했던 건데, 지금 와서 없애긴 뭣해서 다시 적용했다.
\#라고 입력하면 #로 출력해준다.
즉, [#\#_HELLO_#\#]이라고 쓰면 [##_HELLO##_]와 같은 치환자로 변신하는 것이다.
2. 코드 맨 앞과 맨 뒤의 <br /> 또는 엔터 제거
왜 생기는지는 모르겠지만, 가끔 이런 형태가 생기는 경우가 있더라.
그래서, 코드 맨 앞뒤에 엔터나 <br />이 있는 경우 제거하도록 했다.
3. bloggerMode시 <br> 정상처리
티스토리에서 <br> 태그를 정상적으로 처리하려면 bloggetMode를 true로 설정해야 한다.
그런데, 문제는 이렇게 하면 <br> 외에도 <br>도 엔터로 처리한다.
코드 일부를 수정해서 <br>는 처리하지 않도록 수정했다.
따라서, html 코드나 sami 자막에서 <br> 태그를 표현할 수 있다.
설치하는 방법은 아래와 같다.
1. 파일 업로드
SH30_TiStory.zip2. 스킨 수정
스킨의 <head> 영역 내에 다음 내용을 삽입한다.
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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="./images/shThemeDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>
3. style.css 약간 수정 (2011.3.14 추가)
이상하게 구글 크롬에서는 불필요한 세로 스크롤바가 생긴다.
이 스크롤바를 안 생기게 하려면 스킨 편집에서 style.css에 다음 한 줄을 추가하면 된다.
이 스크롤바를 안 생기게 하려면 스킨 편집에서 style.css에 다음 한 줄을 추가하면 된다.
div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }4. 티스토리+IE 버그 관련 수정 (2011.4.15 추가)
티스토리에는 <br/> 다음에 엔터(/n)를 강제 삽입하는 버그가 있고, IE(8이하)에는 엔터 앞에 공백을 추가하는 버그가 있다.
이런 경우에도 정상 동작하도록 수정했다.
이런 경우에도 정상 동작하도록 수정했다.
5. 기타사항
a. SH3는 계속 업데이트 되고 있으며, 새로운 테마와 언어 파일은 홈페이지에서 찾을 수 있다.
b. 근 1년 만에 티스토리로 돌아왔는데, 티스토리 새관리의 멍청한 버그는 그대로 남아있다.
티스토리 개발자들은 정말 게으른 것 같다.
<pre> 태그 내에 내용을 입력하면 엔터가 계속 2개로 늘어나는 버그는 그대로다.
즉, Syntax Highlighter를 사용하려면 기존관리를 쓰는 수밖에 없다. 헐~
이 버그 자체는 수정되었으니, 원천적 문제는 남아있기 때문에 4.의 현상이 발생한 것임.
b. 근 1년 만에 티스토리로 돌아왔는데, 티스토리 새관리의 멍청한 버그는 그대로 남아있다.
티스토리 개발자들은 정말 게으른 것 같다.
<pre> 태그 내에 내용을 입력하면 엔터가 계속 2개로 늘어나는 버그는 그대로다.
즉, Syntax Highlighter를 사용하려면 기존관리를 쓰는 수밖에 없다. 헐~
이 버그 자체는 수정되었으니, 원천적 문제는 남아있기 때문에 4.의 현상이 발생한 것임.
'컴퓨터야그 > 블로그 관련' 카테고리의 다른 글
| 다음 계정이 없다고 트위터/페북 발행이 안 될 쏘냐? (2) | 2011.09.15 |
|---|---|
| JW Player 5.6c 업그레이드 (3) | 2011.07.23 |
| 티스토리와 IE 버그의 묘한 합체: Syntax Highlighter 오류 (1) | 2011.04.14 |
| 티스토리 구관리를 없애려면 새관리의 버그는 다 잡았어야지! (2) | 2011.04.13 |
| 블로그 복구 완료! (15) | 2011.03.02 |
Recent comment