노무현 대통령 배너
BLOG main image
왕미친놈의 왕미친세상입니다. 미친 소리는 써도 되지만, 근거 없는 소리는 쓰면 안 됩니다.


  • 참고 : 소스 복사 버그가 고쳐졌다고 생각해서 글을 올렸는데, 오늘(3월 30일) 보니 다시 나타났습니다. 아마도 제가 무엇인가를 착각했나 봅니다. 죄송합니다.

최근 텍스트큐브닷컴(http://www.textcube.com/)에서 소리소문 없이 패치된 기능이 있다. 문법 강조 기능의 버튼 중에 "copy to clipboard"가 있는데, 처음에는  가 잔뜩 달라붙는 문제(텍큐닷컴은 Syntax Highlighter을 개선하라! by BLUEnLIVE)가 있었으나 최근 고쳐졌다. 그 버그가 고쳐졌음을 확인하는 과정에서 스킨의 images 디렉터리를 나타내는 주소에 대해 생각해 볼 기회를 갖게 되었습니다.

[code html]<p>예제</p> <p>오른쪽에는 공백이 있습니다.→               .</p> <p>.                  ←왼쪽에는 공백이 있습니다.</p>[/code]
더 이상 &nbsp;를 볼 수 없다.

더 이상 &nbsp;를 볼 수 없다.

그런데 버전은 v2.0.320 그대로입니다. 그래서 공지를 안 했나?

BLUEnLIVE 님의 패치

물론 느려터진 텍스트큐브닷컴 개발자 분들이 패치하기 전에 BLUEnLIVE 님이 패치를 멋지게 해주셨다(텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조). 사실 이번에 티스토리에서 옮겨온 뒤로 문법강조가 적용된 부분이 있어서 BLUEnLIVE 님의 패치를 적용하려고 했는데, 벌써 패치가 되었더라고요.

태터툴즈의 스킨 이미지 주소

한편 BLUEnLIVE 님의 패치에 대한 글과 다른 글을 보았습니다.

그런데 텍스트큐브닷컴스킨 이미지 주소를 아주 정확하게 나타내려고 노력하셨습니다. 그러나 그것은 결론만 말하자면, 엄청난 삽질임을 깨닫게 되었습니다. 왜? 스킨이기 때문입니다. 무슨 뜻인지 이해가 안 된다고요?

스킨(skin)은 컴퓨팅에서 저마다 다른 사용자의 취향에 맞추기 위해 어떠한 소프트웨어웹사이트에 적용할 수 있는 사용자 그래픽 배색 (GUI)으로서의 테마와 연결된다. from 위키백과 :: 스킨 (컴퓨터)

스킨이란 기본적으로 테마 기능을 갖게 됩니다. 다시 말해 태터툴즈 시스템을 사용한 블로그에서 사용하는 스킨은 다른 블로그에 그대로 적용 가능하다는 점입니다. 물론 텍스트큐브닷컴에서 사용하는 스킨은 티스토리에서 그대로 사용할 수 없는 경우도 있지만, 적어도 스킨 이미지 주소 또는 스킨 이미지 디렉터리 주소는 동일하게 적용된다는 뜻입니다.

티스토리 스킨 이미지 주소 표현

티스토리 스킨에서 이미지 주소를 어떻게 표현했는지를 알아보겠습니다. 이것은 제 테스트 블로그를 이용했습니다. 태터툴즈 시스템에 거의 대부분 공통으로 존재하는 rss.gif 파일의 경로를 찾겠습니다.

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 표현했습니다. 이때 중요한 부분은 맨 앞에 보이는 ( . )과 images 라는 디렉터리 이름입니다. 이때 ( . )은 현재 디렉터리를 가리키는 축약 표현입니다. 도스/윈도/유닉스 공통입니다. 매킨토시의 OS X 에서도 적용 가능합니다.

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

위의 티스토리 테스트 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://cfs.tistory.com/custom/blog/48/488983/skin/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 제 티스토리 블로그인 왕미친놈의 왕미친세상에도 있습니다. 거기에서는 "http://cfs.tistory.com/custom/blog/35/354861/skin/images/rss.gif"라고 나타나 있네요.

맨 끝에 나타나는 /images/rss.gif 부분이 공통으로 보입니다.

텍스트큐브닷컴 스킨 이미지 주소 표현

한편 rss.gif 파일텍스트큐브닷컴의 스킨에도 존재합니다.

텍스트큐브닷컴 블로그 스킨 편집 화면

텍스트큐브닷컴 블로그 스킨 편집 화면 (아랫부분 생략)

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 티스토리의 경우와 똑같이 표현했습니다.

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

위의 텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://fs.textcube.com/blog/0/6512/skin/1/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 아무리 스킨을 바꾸더라도 항상 "./images/rss.gif"라는 꼴을 유지하게 됩니다. 결국 BLUEnLIVE 님이 찾아내신 다음과 같은 표현은 모두 삽질이 되어 버립니다. 정말 애써 작성하셨을 텐데 뭐라 위로의 말을 드려야 할지... T,T

[code html]<script type="text/javascript" src="http://(블로그 이미지 주소)/j_shCore.gif"></script> <script type="text/javascript" src="http://(블로그 이미지 주소)/j_shBrushMsx.gif"></script> </body>[/code]

위의 코드에서 굳이 "http://(블로그 이미지 주소)/j_shCore.gif"라고 표현할 필요가 없습니다. (텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조) 앞서 밝힌 코드를 응용하여 "./images/j_shCore.gif"라고 바꾸면 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서와 BBCode for 텍큐닷컴 3.3 업데이트 문서에 보이는 그림도 별로 쓸모는 없습니다. 오히려 스킨이 가진 장점, 곧 어디에도 그대로 적용할 수 있다는 점을 없애 버리는 삽질이 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

블로그 CSS를 고치다가 아크로에디트가 URL 강조를 틀리게 하는 것을 하나 더 발견하였습니다.

벌레의 유형

  • 자신이 끼어야 할 때와 끼지 말아야 할 곳을 제대로 알지 못하는 벌레입니다.
  • 또한 꼬리가 달렸다고 엉뚱한 짓을 하는 벌레이기도 하고요.

개발자의 답변

2010년 1월 17일 버그 리포팅을 한 상태입니다.

벌레의 발견

아크로에디트 홈페이지에서 URL 인식기능 개선 건의라는 글을 읽고 URL 강조 기능을 시험해 보았을 때도 미처 발견하지 못한 벌레입니다.

공백까지 URL로 인식해 버렸습니다.

공백까지 URL로 인식해 버렸습니다.

벌레의 원인

지난 번과 마찬가지로 URL을 인식하는 알고리듬에서 URL의 끝을 인식하는 부분에서 오류가 있지 않나 예상해 봅니다.

비슷한 벌레

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

최근 아크로에디트에 관한 글을 쓰다가 조금 불편한 기능이 있어서 개선할 수 없을까 궁리하다가 멀티 라인 기능이 있음을 알게 되었습니다. 

문법 강조와 자동 줄 바꿈

강제 열 맞춤 지시선에 걸쳐 있는 내용

강제 열 맞춤 지시선에 걸쳐 있는 내용

위 그림을 보면 글 내용이 강제 열 맞춤 지시선에 걸쳐 있습니다. 이때 모두 문법 강조가 올바르게 되어 있어 색깔이 잘 나타납니다. 이것을 강제 줄 바꿈 하게 되면 아래 그림처럼 됩니다.

자동 줄 바꿈 화면

자동 줄 바꿈 화면

그런데 이때 2번 영역은 전체가 다음 줄로 밀려나면서 문법 강조가 올바르게 되었습니다. 기본적으로 3번 영역은 모두 비었습니다. 자동 줄 바꿈을 하였으니 당연한 일이지요.

문제는 1번 영역이다. 이것은 중간이 잘립니다.

비교 1 : 잘린 부분만 표시

비교 1 : 잘린 부분만 표시

위 그림 비교 1을 살펴보면, 윗부분은 제대로 문법 강조가 되었는데, 아랫부분은 문법 강조가 제대로 되지 못하였습니다. 결국 윗부분은 파란색으로, 아랫부분은 검정색으로 나타납니다.

문법 강조 설정 변경 : 올바르게 보기

기왕에 문법 강조를 하였으니 제대로 봐야 하지 않겠습니까? 지금부터 환경 설정을 해 봅시다.

문법 강조 설정 : 현재 파일에 알맞은 문법 강조 설정을 편집

문법 강조 설정 : 현재 파일에 알맞은 문법 강조 설정을 편집

위와 같이 환경 설정에서 문법 강조를 불러 옵니다. 이때 현재 편집하고자 하는 문법 강조를 찾아서 편집 단추를 클릭합니다. 현재 자주색 네모로 테두리가 된 부분을 살펴보시면 이해할수 있으리라 생각합니다.

멀티 라인 문자열 허용에 체크 표시

멀티 라인 문자열 허용에 체크 표시

위 그림처럼 문법 강조 기능 설정 대화상자에서 멀티 라인 문자열 허용 체크박스에 체크 표시를 하면 됩니다. 끝난 뒤에는 확인 단추를 클릭해 주시면 됩니다.

올바르게 나타난 문법 강조

올바르게 나타난 문법 강조

찾아 보기 힘든 사람을 위해 문제가 된 부분만 떼어내면 다음과 같습니다.

비교 2 : 올바르게 바뀐 부분만 표시

비교 2 : 올바르게 바뀐 부분만 표시

위 그림 비교 2를 살펴보면, 비교 1과는 달리 윗줄과 아랫줄 모두 파란색으로 문법 강조를 올바르게 나타내고 있습니다.

추가 정보

이때 바꾸기 기능(문자열을 찾아서 바꾸는 기능)으로 바꿀 경우 위 비교 2에서 나타난 문자열 부분은 찾지 못하였습니다. 버그인지 아닌지 확인 중입니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

조커(ZocKr) 님의 블로그 BLUEnLIVE's ZocKrWorld를 참조하여 Google Syntax Highlighter(문법 강조)를 적용하였습니다.

적용 예시

  • 배치파일 : [ code bat]내용</code>
[code bat; highlight: (6, 9, 13)] @ECHO OFF REM 1부터 10까지의 합을 구하는 배치파일 SETLOCAL SET SUM=0 SET SUMTEMP=0 FOR /L %%i IN (1,1,10) DO CALL :COUNT GOTO :EOF   :COUNT SET /A SUMTEMP=%SUMTEMP%+1 SET /A SUM=%SUM%+%SUMTEMP% ECHO 0부터 %SUMTEMP%까지의 합은 %SUM%입니다. GOTO :EOF [/code]
  • C 언어 : <code class="brush:cpp;">내용</code>
[code cpp] int main () { // 1부터 10까지의 합을 구하는 C 언어 소스코드     int i, sum;     for (i=1, sum=0; i<=10; i++) {         sum = sum + i;         printf ("\d\n", sum);     }     return (0); } [/code]
  • HTML & 티스토리 치환자 : <code class="brush:html;">내용</code> 그리고 치환자는 [## 사이에 \를 집어넣었습니다.(조커 님의 팁 참조)
[code html; stripBrs;] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[\##_title_##] :: [\##_page_title_##]</title> <link href="./style.css" rel="stylesheet" type="text/css" /> [/code]

참조 문서

이 글은 스프링노트에서 작성되었습니다.


'일기' 카테고리의 다른 글

TeamViewer 시험  (0) 2009.12.04
블로그 백업 및 점검  (4) 2009.11.20
경술국치  (0) 2009.08.29
[동칠, 이계 정착하기] 어라, 이건 뭐야?  (0) 2009.08.22
고달픈 넷째 달  (2) 2009.06.29
글쓴이는 koc/SALM입니다.
본문에 저작권에 대한 사항이 나타나지 않거나, 저작권이 BY-SA로 표기되어 있다면,
이 글은 GFDL로 공개한 글입니다.

카테고리

분류 전체보기 (1005)
스크립트 (22)
벌레와 팁 (126)
소프트웨어 (240)
하드웨어 (6)
이야기 (24)
말의 나무 (506)
미쳐보자 (22)
일기 (48)
아이폰 (10)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

글 보관함