티스토리용 BBCode 3.5 업데이트

그동안 BBCode를 텍큐닷컴용으로만 공개했다. 본인의 블로깅 환경에 따른 것임)

이번에 텍큐닷컴 서비스가 종료됨에 따라 다시 티스토리로 돌아왔고, 이에 따라 BBCode도 티스토리 용으로 다시 공개한다.
기능 면에서는 3.3에 비해 크게 달라진 것이 없으나, 미묘한 사용상의 문제점들을 해결했다.
특히, 이모티콘이 댓글의 내용과 충돌하는 경우를 가능한 피하도록 수정했다.

이전 버전과 달리 3.5에서는 다음과 같은 경우는 BBCode로 처리하지 않는다.
- magnet:?xt=urn:btih:OD67Y6MN
- A--;

BBCode 3.5를 적용하기 위해서는 다음 절차를 따르면 된다.


1. 설치

아래 파일을 다운받은 뒤 압출을 풀면 TiStory와 Helper라는 두 개의 폴더가 나온다.
이 중 TiStory 폴더의 내용을 스킨에 업로드한다.



2. 스킨 수정


위에서 압축을 풀어 생성된 Helper 폴더 내에는 BBCodehelper for TiStorySkin.exe라는 파일이 하나 있다.


여기에 블로그의 스킨을 붙여넣은 뒤 BBCode 적용 버튼을 클릭하면 BBCode가 적용되는 형태로 스킨이 변환된다.
이를 다시 복사해서 블로그 스킨에 붙여넣는다.


3. 적용 가능한 BBCode#1: 기본 BBCode

아래와 같은 BBCode는 (당연히) 기본적으로 지원한다.

[i]이탤릭[/i] : 이탤릭
[b]볼드[/b] : 볼드
[u]밑줄[/u] : 밑줄
[s]지우기[/s] : 지우기[각주:1]
[code]소스 코드[/code] : 소스 코드 (예제 생략)
[quote]인용문[/quote] : 인용문 (예제 생략)
[img]이미지 URL[/img] : 이미지 (예제 생략)
[img=이미지 URL] : 이미지 (예제 생략)
[url=http://qaos.com]QAOS[/url] : QAOS (링크)[각주:2]
[color=red]색깔[/color] : 색깔


4. 적용 가능한 BBCode#2: 확장 BBCode. 혹자는 BBCode plus라고도 부름

위의 기본 BBCode 외에 아래와 같은 확장 코드를 지원한다.

[size=크기]글자 크기[/size] : 글자 크기
[ru]빨간 밑줄[/ru] : 빨간 밑줄
[bu]파란 밑줄[/bu] : 파란 밑줄
[rb]빨간 볼드[/rb] : 빨간 볼드
[bb]파란 볼드[/bb] : 파란 볼드
[red]빨간색[/red] : 빨간색
[blue]파란색[/blue] : 파란색
[ur=http://qaos.com]QAOS[/ur] : QAOS (링크) / 스팸필터 우회용#1
[link=http://qaos.com]QAOS[/link] : QAOS (링크) / 스팸필터 우회용#2
[c=red]색깔[/c] : 색깔
[q]인용문[/q] : 인용문 (예제 생략)
[embed=주소 (폭) (높이)] : 동영상 embed[각주:3]
  [embed=http://kr.youtube.com/watch?v=sxA2FZANE2o]
  [embed=http://kr.youtube.com/v/sxA2FZANE2o 500 300]
  [embed=http://youtu.be/sxA2FZANE2o 500 300]
  ※ embed에서 폭과 높이는 생략 가능하며, 생략시 425x355로 자동 설정
[list][*][/list] : 리스트
[spoiler]스포일러[/spoiler] : 스포일러


5. 기타기능: 이모티콘 지원

티스토리에서 적용한 기능을 그대로 갖고온 것인데, 아래와 같은 이모티콘을 지원한다.
티스토리의 이모티콘과 코드는 동일하지만, 훨씬 예쁘고, 티스토리에 상존하던 미묘한 버그가 없다. ㅎㅎ

사용자 삽입 이미지

:) ;) :P 8D :( --; :D :O :x


6. 기존 버전에서 개선된 내용


a. 4번의 embed 태그에서 http://youtu.be/주소 형식 지원
b. 4번에서 spoiler 태그 추가
c. 5번의 이모티콘 기능에서 댓글의 일부인 경우 이모티콘으로 변환하지 않도록 수정
d. \#를 #로 변환하도록 수정. 즉, [#\#_치환자_#\#] 형식으로 치환자를 표현할 수 있음


덧. 2011.10.21 3.5업데이트:
     - [s]를 추가로 지원. s는 strikeout(지우기)을 의미함.
     - [img]가 좀 더 안전하게 동작하도록 수정,
     - [code]의 변환을 다소 수정


  1. 3.5에서 추가됨 [본문으로]
  2. 3.5에서 HackSMW 님 권고에 따라 유효성 검사를 티끌만큼 강화함 [본문으로]
  3. 3.5에서 좀 더 안전하게 동작하도록 allowScriptAccess="never" 옵션 추가 [본문으로]
Trackback 0 Comment 13
  1. Favicon of http://enote.tistory.com BlogIcon 후박나무 2010.12.18 18:21 address edit & delete reply

    BLUEnLIVE님 안녕하세요^ ^
    블로그 포스트 보고 저도 BBcode 적용했네요^ ^
    좋은 팁 올려주셔서 감사합니다.

    헌데, 제가 적용한 것이 BLUEnLIVE님 것과는 조금 다른 것 같습니다.
    저도 이모티콘 부분을 확장하고 싶은데,
    BLUEnLIVE님 블로그 처럼 꾸밀 수 있을까요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.18 18:28 address edit & delete

      제 블로그에서 이모티콘으로 검색하면 관련된 글들이 좀 나올 겁니다.
      별도로 포스팅하거나 설명할 계획은 없습니다.

    • Favicon of http://enote.tistory.com BlogIcon 후박나무 2010.12.18 20:52 address edit & delete

      이전에 텍큐에 적용했던걸 조금 수정해서 성공했네요^ ^
      감사합니다.^ ^

  2. Favicon of http://salm.pe.kr/ BlogIcon koc/SALM 2010.12.24 15:44 address edit & delete reply

    그런데... [b][[/b]code] [/code]는 어떤 역할을 하나요?
    방금 글을 올리면서 저렇게 입력했더니, 줄이 바뀌면서 인용문처럼 변하더군요.
    어떤 역할인지 궁금합니다.

    test
    [code]a = b + c; [/code]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.24 19:11 address edit & delete

      [ code ]는 소스 코드를 올리기 위해 만든 태그입니다.

  3. Favicon of http://new-money.net BlogIcon cyan_sky 2011.01.25 20:28 address edit & delete reply

    [b]감사합니다![/b]
    방금 적용을 마쳤습니다. cumulus도 잘 사용하고 있습니다:D

  4. Favicon of http://softblow.tistory.com/ BlogIcon Ch. 2011.07.21 03:07 address edit & delete reply

    [emo=091] 설치해봐야겠네요. 이모티콘도 되고... 북마크에 넣어뒀다가 다음에도 찾아와봐야 할 것 같네요. ㅎㅎ

  5. Favicon of http://softblow.tistory.com/ BlogIcon Ch. 2011.07.21 03:26 address edit & delete reply

    설명이 난관인 이야기로군요. 잘쓰겠습니다 'ㅂ':)

  6. Favicon of http://hacksmw.tistory.com BlogIcon HackSMW 2011.10.04 08:46 address edit & delete reply

    좋은 프로그램 감사드립니다.
    헌데... 플래시 등에 악성 스크립트를 삽입해서 CSRF 등이 가능할 것으로 보이는데,
    네이버 게시판처럼 [\embed]의 출력 부분에 allowScriptAccess="never" 옵션을 추가하여
    플래시에서 자바스크립트에 접근하지 못하도록 하는 것이 어떠련지 조심히 여쭤봅니다.

    그리고 아래와 같은 bbcode를 입력 시 자바스크립트가 실행되는데 유효성 검사를 엄밀히 하도록 하는게 어떠련지요?
    [ img]http://dummy"onerror="alert('Bang!')"[ /img]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.10.04 18:25 address edit & delete

      고맙습니다. 기능을 추가하도록 하겠습니다...만... 언제가 될 지는 모르겠습니다. ㅠ.ㅠ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2011.10.21 08:22 address edit & delete

      그런데, 그것이 실제로 일어났습니다.
      약간 수정했습니다. ^^;

  7. Favicon of http://pennyway.net BlogIcon 페니웨이™ 2011.10.21 08:33 address edit & delete reply

    [emo=007] 이런거 만드실 시간에 작업을 하시라능. 갈굼갈굼

  8. Favicon of http://jhhus.tistory.com BlogIcon 제임스라이언 2012.04.23 22:09 address edit & delete reply

    이상하게 저는 적용이 안되네요... 분명히 클립보드에서 스킨.html을 전부 붙여놓고 BBCode 적용을 하고 다시 블로그 스킨.html에 붙여넣었는데도 반응이 없네요 ㅠㅠ 뭐가 잘못된건가요?