BBCode for Tistory 2.0 공개

티스토리용 BBCode v1.0, 티스토리용 BBCode v1.1a를 통해서 티스토리용 BBCode를 시험삼아 구현했었습니다.
그런데, 사용하다 보니 두 가지 커다란 문제가 있었습니다.

1. 설치 과정이 너무 복잡함
   설명을 최대한 쉽게 적는다고 적었지만, 블로그 스킨을 바꾸면서 직접 적용해보니 상당히 어렵더군요.

2. <textarea> 태그가 보기 어색함
   처음 댓글을 달면 <textarea> 속에 생성되고, 다시 <div>로 변환되는데, 이 과정이 어색해보이더군요.
   사실, 이렇게 된 이유는 제가 JavaScript를 잘 몰라서 생긴 문제였습니다.

이러한 문제를 완벽하게 해결한 티스토리용 BBCode 2.0을 공개합니다.

이 BBCode의 장점은 아래와 같습니다.

1. 티스토리의 답글에 생명력을 불어넣을 수 있음
    물론, 이것은 BBCode의 특징입니다.

2. 설치방법이 쉬움
    파일 1개를 업로드한 뒤 스킨 수정 프로그램만 돌리면 됩니다.
    스킨 수정을 한칼에 해주는 프로그램이 있기 때문에 설치가 쉽습니다.
    (실제로 수정되는 내용은 v1.1a와 거의 같습니다)

3. 제거도 간단함
    스킨을 수정해주는 프로그램은 원복도 간단하게 해줍니다.

4. 티스토리 버그로 인해 [url=]을 입력할 수 없던 문제 해결
    기존 BBCode 쓰면서 발견한 현상인데, [url=] 코드를 사용하면 댓글이 차단되어 버립니다.
    그래서, [url=] 대신에 [ur=]을 사용해도 동일하게 동작하도록 했습니다.

---

w0rm9 님처럼 망설이시던 분들… 이젠 써보셔도 좋습니다!

설치 과정은 아래와 같습니다.

1. 첨부파일 다운받기

BBCode4TiStory.zip

   위 압축파일을 다운받은 뒤 풀면 두 개의 파일이 들어있습니다.
   두 파일은 아래와 같습니다.
    - bbcode20.js : BBCode → HTML 변환기 본체
    - BBCodehelper for TiStorySkin.exe : 스킨 수정 도우미

2. bbcode20.js 업로드

    관리메뉴의 스킨→직접올리기에서 bbcode20.js 파일을 업로드합니다.

3. 스킨 파일 수정

얘가 다 알아서 해줍니다.

   BBCodehelper for TiStorySkin.exe(이하 도우미)를 실행합니다.
   다음, 역시 관리메뉴의 스킨→HTML/CSS 편집에서 skin.html 파일을 복사한 뒤 도우미에 붙여넣습니다.
   그리고는 도우미에서 BBCode 적용 버튼을 클릭해서 내용이 바뀌면 이것을 다시 skin.html에 붙여넣습니다.

이 화면에서는 그저 복사/붙이기만 하면 됩니다

   마지막으로 HTML/CSS 편집 화면에서 저장 버튼을 클릭하면 됩니다.

   ※ 이 프로그램에는 BBCode 관련 코드가 중복되는 것을 방지하는 코드도 삽입되어 있습니다

---

지원되는 BBCode는 아래와 같습니다.

1. 일반적으로 널리 사용되는 코드 (v1.1a와 동일)

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)
[color=red]색깔[/color] : 색깔

2. 티스토리의 문제 해결 또는 편리성을 위해 임의로 만든 코드 (새로 추가)

[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 티스토리 문제 해결
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)

3. 치환자 입력 기능 (v1.1a와 동일)

\#를 입력하면 \가 사라집니다.
즉, [#\#치환자#\#]를 입력하면 치환자만 남습니다.