Gloridea On The Stage

티스토리에서 소스코드 문법 하이라이팅을 위해서 보통 Syntax Highlighter를 많이 사용한다. 그러나 입력할 때 HTML 소스에 직접 손을 대야 하기 때문에, 상당히 괴롭다. 그래서 일전에 티스토리에 SyntaxHighlighter 마크업 자동 적용 북마클릿이라는 걸 만들었는데, 발로 만들다보니 여러 문제가 있었다.

1. 티스토리의 새 에디터에서는 사용할 수 없었다.
   
2. 소스 수정 후에는 저장하기 전에 [소스코드의 BR 제거] 를 반드시 한 번 실행시켜줘야 했다.
   깜빡 잊고 그냥 저장하면 개떼같이 둘러 싼 HTML 태그를 볼 수 있었다. (한 건망증 하는 나는 항상 잊었다.)
   
3. 미리보기/임시저장 등에는 적용되지 않았다.
   

그래서 전면적으로 손을 좀 봤다. 티스토리의 새 에디터용이다. 물론 아직까지 Firefox만 지원(-_-;;)한다.

사용방법

1. Syntax Highlighter 를 적용할 소스코드를 입력하고 SyntaxHighlight Helper 북마클릿을 클릭한다.
   
   
   
2. Syntax Highlight Helper가 로딩되면 소스코드를 블럭 지정하고 새로 생긴 적용 아이콘을 클릭한다.
   
   
   
3. 저장하면 보기 화면에서 Syntax Highlighter가 적용된 소스코드를 볼 수 있다.
   
   
   
4. 수정 모드로 진입하면 처음에는 SyntaxHighlight Helper가 적용되어 있지 않다. 이 때는 소스코드 영역의 배경색이 회색으로 보인다. 이는 Syntax Hightlight Helper를 로딩해야 한다는 것을 상기시켜주기 위함이다. (이 상태로도 소스코드 수정이 불가능하지는 않으나, 엔터 등을 입력하고 저장하면 소스코드 영역에서 태그가 달라붙는다.)
   
   
   
5. 다시 북마클릿을 클릭해서 Syntax Highlight Helper를 로딩하면 소스코드 영역의 배경색이 원래대로 돌아온다.
   
   

설치

1. 첨부한 syntax_highlight_finder.js 와 syntax_highlight_helper.js 를 다운로드 받는다. (아래 아이콘 클릭)
   

   syntax_highlight_finder.js

   syntax_highlight_helper.js

   
   
2. Syntax Highlighter 설치와 동일하게 스킨 파일 업로드 하는 곳에 업로드한다.
   (스킨 > HTML/CSS 편집 > 파일 업로드 에서 업로드할 수 있다.)
   
   
3. 스킨 > HTML/CSS 편집 > HTML/CSS 편집에서 SyntaxHighlighter 스크립트 태그를 추가한 바로 밑에
   <script class="javascript" src="./images/syntax_highlight_finder.js"></script>
   한 줄을 더 추가하고 저장한다.
   
   
4. 아래 북마클릿을 우클릭하여 즐겨찾기로 지정한다.
   

    Syntax Highlight Helper 북마클릿
   

시간 나면 조금 더 해보고 싶은 것들.

1. 소스코드 영역 내에서 엔터 입력시 <p>등의 마크업이 추가되는데, 이것을 원천적으로 차단하기.
   
1. 현재는 저장 시점에 걸러내고 있음.
   
2. 시도는 해봤는데, 편집모드에서는 keypress 등의 이벤트 핸들러가 잘 안 먹는다. 뭐가 문젤까...
   
   
2. 다른 브라우저에서도 쓸 수 있게 고치기.
   
1. 하지만 수많은 예외상황과 맞짱 뜨기 귀찮다. orz
   
   
3. 현재 언어 기본값이 무조건 javascript로 되어 있는 부분을 cookie 기반으로 마지막에 사용한 언어를 표시하도록 수정.
   
   
4. 더 좋은 걸 바란다면... 현재는 소스코드 영역 입력 시 highlight 할 언어 종류를  prompt에 입력하게 되어있는데, 레이어라던가 좀 더 깔끔한 방법으로 처리해보기.
   
   

... 그러나 저 위의 일들... 별로 할 것 같지는 않다. 이미 내가 사용하는데는 충분히 편리한 상태가 되었으므로. ;; 그래도 열화와 같은 성원(... 같은게 있을리가.)이 있다면 고려를 해볼수도...