예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.

그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 “Create HTML From Selection” 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.

그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.

마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다. jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기(이)란 제목의 글 마저 읽기 →

여러 JavaScript Library들 중에서 최근에 와서야 발견했지만 아주 마음에 드는 놈인 jQuery의 이모저모를 맛보고 있는데, 마침 TextMate 용 jQuery Bundle이 제공되고 있어서 바로 설치해서 사용하고 있다.

그런데, 사용하다 보니 jQuery bundle에 정의되어 있는 snippet들은 HTML 문서에서는 바로 사용할 수 없다는 사실을 알게 되었다. 실험 목적으로 HTML 문서에 바로 JavaScript를 삽입해서 쓸 경우에는 이 점이 무척 아쉬운 부분이다.
하지만, 해결책은 바로 옆에 있었다.

TextMate의 Languages Bundle Editor를 열고 HTML bundle을 선택한 후에, 다음과 같은 코드를 HTML의 기본 pattern이 정의되어 있는 부분(16 번째 줄 부터 시작 됨)에 추가해 주면 된다.

{   name = 'source.js.jquery.embedded.html';
    begin = '(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)';
    end = '(?<=</(script|SCRIPT))(>)(?:\\s*\\n)?';
    patterns = ( { include = 'source.js.jquery'; } );
},

TextMate을 재실행하면, HTML bundle이 적용된 환경에서도 바로 jQuery snippet들을 불러와서 사용할 수 있게 된다. 🙂
jQuery bundle의 다음 버전에서는 아마도 위와 같은 추가 설정 작업이 필요 없도록 수정될 모양이다.

추가: Getting jQuery bundle to work within script tags embedded in HTML

지금까지 일반적으로 JavaScript를 웹 문서에 심어놓을 때 MIME type으로는 다음과 같은 어쩌면 즉흥적이고 통일되지 못한 것들이 사용되어 왔다.

• text/javascript
• text/ecmascript
• application/x-javascript (javascript 앞에 x가 붙은 것은 표준이 아닌, 실험적인 것임을 뜻함)
• text/javascript1.5 (요새 브라우저들은 버전 숫자를 그냥 무시해 버림)
• language=”JavaScript” (HTML 4부터는 지원하지 않음)

그래서 이런 혼란스런 상황을 막으려고 2006년 4월에 Javascript(ECMAScirpt)를 위한 MIME type의 표준(RFC4329)이 마련되었지만, 여러 브라우저들의 표준 JavaScript MIME type 지원은 아직 요원한 상황이다.
(확인해 본 바로는, 지금까지 오직 Firefox 1.5+, Opera 9+, Camino 만이 지원하고 있다.)

Javascript 프로그램은 그 성격상 text 문서로 지정하는 것은 적절치 않으며, 대신 application/javascript 혹은 application/ecmascript(이것을 사용하면 좀 더 엄격한 적용 규칙이 주어진다)를 대신 사용할 것을 권장하고 있지만, 이는 대부분의 웹 브라우저들이 지원하지 않는 한 그 실제 적용은 아직 이를 것이다.

당장은 그냥 서버 쪽 MIME type만 고쳐 둠.

오래 전부터 인간의 소통 욕구는 통신 수단의 발달과 함께 진화해 왔고, 또 여러 행태로 분출되고 있는 상황이다. 그런데 여기에 또 하나의 특화된 소통 수단이 등장하였으니, 그 이름은 바로 Twitter. 우리말로 옮기면 재잘거림 정도 되려나?

여타 다른 IM 수단과 차별되는 점은, 바로 지금 나는 무엇을 하고 있는가?라는 물음에 대한 특화된 답을 표현할 수 있는 수단이 생겼다는 것이다.
물론 이것은 불특정 다수에게 공개하여, 물론 그 불특정 다수는 전혀 니가 무엇을 하든지 관심이 없겠지만, 잠재된 스토커에게 자신의 발자취를 흘릴 수도 있고, 지인들을 초대해서 서로의 현재 상황과 관심을 공유하면서 또 다른 흥미를 나눌 수도 있을 것이다. 아니면, 단지 불평 불만의 지껄임들을 늘어놓을 수 있는 또 하나의 작은 불출 장소가 될 수도 있겠지.
처음에는 나도 별로 쓸모없게 보였지만, 새로운 표현 수단으로서 앞으로 어떻게 발전해 갈지가 흥미롭기도 하고, 잠깐 사용해본 소감은 중독성이 강하다는 것. 😮
Twitter Badget 달기(이)란 제목의 글 마저 읽기 →

물론 여기에 소개된 꼼수들은 완전한 세상에 살고 있다면 불필요한 과정이겠지만, 냉험한 현실 속의 웹 브라우저들은 개발자들에게 차별 대우를 요구한다.

IE 7에서는 이제 CSS의 maxHeight 속성을 이해한다는 것을 이용해서, 다음과 같은 JavsScirpt 코드로 구별할 수 있다:

if (typeof document.body.style.maxHeight != "undefined") {
  // IE 7, Mozilla, Safari, Opera 9 
} else {
  // IE 6, older browsers 
}

IE 7의 변화에 따른 다음과 같은 더 간단한 방법도 있다:

if (window.XMLHttpRequest) {
  // IE 7, Mozilla, Safari, Opera 9
 
} else {
  // IE 6, older browsers 
}

물론, 전통적으로 사용되어 왔던 MSDN에 자세하게 소개되어 있는 조건부 주석을 이용한 구별 방법도 유효하다:

<!--[if IE 7]>
<script type="text/javascript">isIE7 = true;</script>
< ![endif]-->
 ... 기타 브라우져들을 위한 코드

덤으로, CSS 속성 이름 앞에 * 혹은 .(점) 그리고 _(밑줄)이 붙어있는 경우에는 브라우져들 마다 제각기 다르게 인식한다는 것을 이용해서 다음과 같은 방법을 사용할 수도 있다. (IE8의 경우 스타일 선언문 마지막에 꼭 “\9″을 붙여주어야 한다.):

/***** Attribute Hacks ******/
#header {
  margin: 10px;   /* any browsers */
  margin: 12px\9; /* IE 8 and below */
  *margin: 15px;  /* IE 7 and below */
  _margin: 20px;  /* IE 6 and below */
}
 
/***** Selector Hacks ******/
/* IE6 and below */
* html #someDiv { color: red }
/* IE7 */
*+html #someDiv { color: red }

– 참고 글

• Ajaxian – Detecting IE7+ in JavaScript
• CSS Tip: Targeting IE 5.x, 6 and 7 Separately – Edward Eliot
• IMSafer Nerd Blog | CSS for IE6 & IE7
• Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters