Sablog Models/인터넷·웹

티스토리용 SyntaxHighlighter 3.0을 소개합니다!

어­리 2010. 7. 11. 12:43
시험 기간이 끝나자마자 포스팅을 시작한다. 이러니 성적이 좋을 수가 있나.


2010년 7월 2일, SyntaxHighlighter 3.0.83이 배포되기 시작했다. (사본 다운로드)
티스토리용 파일은 글 하단에 있지만 수정된 파일 하나만 올려 놓았기 때문에 이 파일도 받아야 한다.
- SyntaxHighlighter 웹 사이트 바로가기

1. 소개
3.0은 매우 많은 개선점을 컨셉으로 만들어졌다.

2. 삽질 내용

티스토리라든지 텍스트큐브 기반 사용자를 위한 삽질보정.
블루앤라이브 님께서 자주 해 주시던 일이다. 약간의 거대한 조언을 얻었다. 말하자면 방문자 도둑질.

이 삽질의 결과가 아래 shCore.js 파일이다.
  • 텍스트큐브/태터툴즈 계열 (티스토리도) 치환자 입력 지원.
    [#\\#_(치환자)_#\\#]
    라고 입력하면
    [#\#_(치환자)_#\#]
    라고 출력된다.
    티스토리 새관리의 버그, <pre> ~ </pre> 내의 무한 <br /> 제거도 병행한다.
  • 소스 앞뒤의 <br /> 또는 빈 줄 제거.
  • 아래 파일에는 별도의 언어 파일을 추가하지 않았다.


3. 결과물
블루앤라이브 님은 속도 빨라지라고(?) 친절하게 인크립션까지 해 주시지만... 저는 그러지 않아요
2010.12.2. 원활한 작동을 위해 컴파일된 파일로 교체했다.


4. 설치 방법

압축을 풀고 모든 브러시 파일(/scripts/)과 사용할 테마 파일(/styles/)을 업로드해야 한다.
shCore.js는 수정본으로 교체한다.
1.x 시절부터 SyntaxHighlighter를 textarea 태그로 사용했다면 한 줄이 더 필요하다.
<script type="text/javascript" src="./images/shLegacy.js"></script>

[1] 전통적인 방법

강조된 두 줄 중 아래 한 줄이 테마에 직접 관여한다. 두 줄을 이렇게 한 줄로 바꿔도 된다.
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>

[2] 오토로더를 사용하는 방법
SyntaxHighlighter 웹 사이트에 나온 사용법을 거의 그대로 옮겨 왔다.
아무래도 소스가 길어지는 것은 구조적인 한계인 듯하다.
브러시에 있는 .aliases 설정을 가져오려면 애초에 브러시 파일을 불러와야 하는데,
그러면 오토로더를 쓸 필요가 없기 때문.

[3] SyntaxHighlighter 페이지 호스팅을 이용하는 방법
최신 판 소스를 직접 가져올 수 있다.
SyntaxHighlighter 웹 사이트에 나온 사용법을 거의 그대로 옮겨 왔다.