[Emacs] HTML/XML 코딩 어시스트 zencoding

SGML/XML/HTML (사실 전부 SGML에서 파생된 녀석들이지만 -_-) 등의 코딩을 CSS 스타일과 비슷하게 할 수 있도록 도와주는 zencoding-mode.el 소개글.

아마도 다른 에디터에서 이미 지원되는 기능과 동명의 기능을 따로 만들어낸 것이라 생각되지만 정확한 것은 모르겠다.

https://github.com/rooney/zencoding

설치는 zencoding-mode.el 파일 하나만 원하는 곳에 복사하는 것으로 끝난다.

필요한 설정은 로드시키는 것.

(require 'zencoding-mode)

(add-hook 'sgml-mode-hook 'zencoding-mode)
(add-hook 'html-mode-hook 'zencoding-mode)

마이너모드이기 때문에 다른 메이저모드에 훅으로 추가해서 자동으로 발동되게 하였다. 필요하다면 M-x zencoding-mode를 입력해서 토글시킬 수도 있으니 php나 django 코딩 등을 할 때 hook으로 추가하거나 수동으로 토글시키면 된다.

사용법은 CSS를 연상시키는 커맨드를 입력하는 것에서 시작한다. 예제로 다음 코드를 입력했다.

div>a>div#id1+div#id2+br/

이 상태는 아래 스크린샷과 같다.

화면 하단 모드라인에 zencoding-mode가 활성화 되어 있다는 의미의 'zen'이 표시되어 있다. 일단 CSS에서 사용하는 것과 비슷한 단어들과 '>', 혹은 '/', '+' 등의 문자가 사용되어 있는데 이 상태에서 커서를 옮기지 말고 C-j 혹은 CTRL-ENTER를 입력하면

이렇게 표시된다. 일종의 미리보기 상태. 변형시키려면 ENTER를 누르고 취소하려면 다른 이동키나 C-g 등 다른 키를 입력하면 된다. ENTER키를 누르면...

입력했던 내용이 미리보기 내용처럼 변한다. 이런 태그 구조를 단 한 라인의 몇 가지 명령으로 만들어 내는 것이다.

제대로 활용하려면 문법 등에 익숙해 져야 하겠지만 문법 자체가 어려운 것도 아니고 기억해야 할 것도 적어서 활용하기 좋은 모드 같다.

github 공식 사이트에서 다양한 예를 readme 파일에 적어놓았기 때문에 상세한 예를 해당 사이트를 참고하는 것이 좋겠다. 덤으로 관련 동영상을 하나 첨부한다.


이 동영상에서는 yasnippet도 쓰고 있다는 점을 주의해야 한다.

동작구조가 간단하기 때문에 아마도 Vim에도 비슷한 플러그인이 존재할 것 같다 ㅡ.ㅡ;