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에 입력하게 되어있는데, 레이어라던가 좀 더 깔끔한 방법으로 처리해보기.
   
   

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

티스토리에 Syntax Highlighter 를 적용하는 방법은 꽤 많이 찾아볼 수 있다.

다만 문제는 편집할 때 이를 적용하는 게 정말 끔찍할 정도로 힘이 든다는 것이다. 두어번 해보고 나면 다신 해보고 싶지 않을 정도로... 텍스트 편집 모드로 전환해서 하이라이팅 적용할 곳에 pre나 textarea를 적용하고... class 적어주고, name 적어주고...

아무리 읽는 사람의 편의를 고려한다고 해도 이건 쓰는 사람이 너무 고통스럽다.
그래서 북마클릿 형태로 만들었다. -,.-

1. SyntaxHighlighter (javascript) 적용: 이 링크를 우클릭하여 북마크에 추가한다.
2. 글쓰기 모드로 진입한다.
3. 코드를 써넣거나 붙여넣는다.
4. SyntaxHighligher를 적용할 블럭을 드래그하여 선택한다.
5. 저장해둔 북마크를 클릭한다.

이렇게 하면 선택한 텍스트의 태그가 모두 없어지고, 텍스트가 파란 박스 안에 들어간다. 이 파란 박스는 <pre>태그로, 에디터상에서 소스 영역을 구분하기 위해 색을 넣었다. 읽기 화면에서 SyntaxHighligher가 적용되어 보여질 때는 이 선이 보이지 않는다.

이제 좀 코드 입력할 맛 난다.
기본적으로 위 북마클릿은 자바스크립트용이다. 다른 버전은 다음과 같다.

1. C++
2. C#
3. CSS
4. Delphi
5. Java
6. Javascript
7. PHP
8. Python
9. Ruby
10. SQL
11. VB
12. XML/HTML

이걸 모두 다 북마크하는 게 답답하다면, prompt 창으로 언어를 입력 받는 버전을 사용해도 된다. 대신 매번 언어를 적어주는 수고를 감수해야 -,.-;

중요한 건!
이 모든 기능이 Firefox 용이라는 점이다. -,.-
IE용은 차차 만들어볼 예정.... (믿거나 말거나)

소스코드 :

javascript:(function() {
var _ed = document.getElementById('tatterVisualEditor');
var _cw = document.createElement('pre');
_cw.style.border = '1px dotted red';
_cw.setAttribute('name', 'code');
_cw.className = 'javascript';
_ed.contentWindow.getSelection().getRangeAt(0).surroundContents(_cw);
_cw.innerHTML = _cw.innerHTML.replace(/(<\/?p>|<br.*?>)/g, '\n').replace(/<.*?>/g, '');
})();

추가 :
<pre> 태그 내에 글을 작성해도 엔터를 치면 자동으로 <br \>이 삽입되어 원하는 개행문자 대신 태그가 출력되는 문제가 있다.
이를 해결하기 위해서 북마클릿을 하나 더 만들었다.
<pre name="code"> </pre> 안에 있는 <br />들을 모두 찾아 개행문자로 바꿔주는 북마클릿이다. 소스상의 <br />은 건들지 않는다. 꼭 소스를 고치지 않았더라도 HTML 편집모드를 한 번이라도 들어갔다가 나왔을 경우 (나오지 않고 바로 저장하면 상관없지만) BR이 자동으로 붙으므로, 제거해주고 저장해야 한다.

한 번 클릭하면 편집 영역에 있는 모든 소스코드의 BR을 개행문자로 바꿔준다.


추가하는 방법은 위와 동일하다.

소스코드의 BR 제거

소스코드 :

javascript:(function(){ 
    var _ed = document.getElementById('tatterVisualEditor');
    var _pres = _ed.contentWindow.document.getElementsByTagName('pre'); 
    for (var i = 0; i < _pres.length; i++) {
        if (_pres[i].getAttribute('name') != 'code') continue;
        var _brs = _pres[i].getElementsByTagName('br');
        for (var j = _brs.length - 1; j >= 0; j--) {
            _brs[j].parentNode.replaceChild(document.createTextNode('\n'), _brs[j]);
        }
    }
})();