[Emacs] Javascript와 CSS가 포함된 HTML 파일 편집
Emacs는 다양한 메이저모드(Major mode)를 가지고 있고 특정 파일을 편집 할 때 특정한 모드가 매핑되어 편집이 편하도록 도와주는 것이 일종의 메카니즘이다. 하지만 이런 정책(?)이 방해되는 케이스가 있으니 바로 웹 개발, 특히 자바스크립트와 CSS가 포함되어 있는 HTML을 편집하는 경우이다.
이를 이용하는 분들이라면 물론 알겠지만, 자바스크립트나 CSS는 HTML과는 전혀 다른 문법을 사용한다. 따라서 HTML파일을 편집 중일 때 html-mode가 되는 경우 자바스크립트와 CSS를 편집하려 하는 순간 들여쓰기(indentation) 및 색상강조(Syntax Highlighting)이 박살(?)난다.
물론 해법은 있다. 이를 위해 multi-mode.el 같은 것들도 있고 nxhtml-mode의 mumamo를 이용 할 수도 있다. 아래 링크에서 다양한 방법을 찾을 수 있다.
나는 mumamo를 사용하고 있었지만 뭔가 안타까운 점(?)이 있어서 새롭게 multi-web-mode를 시도해 봤다. 이유는 굉장히 단순하다. 코드가 github에 올려져 있어서 서브모듈로 관리하기 쉽기 때문이다. -_-;;;;
설명은 위 공식저장소에 다 되어 있다. 그래도 쓸 게 없으니(?) 여기다 설정 코드를 붙여볼까 한다.
mweb-default-major-mode는 사용하는 HTML 모드를 설정하면 될 것이다. 별 다른 모드를 추가하지 않았다면 Emacs에 기본적으로 포함된 html-mode를 그대로 이용하면 된다.
mweb-tags의 경우 가장 중요한 설정이다. 바로 HTML태그를 기준으로 어떤 모드를 적용 할 것인가에 대한 부분이다. 정규표현식으로 좀 복잡하게 표현되어 있지만 단순히 설명하자면 script 태그나 style 태그 내부에서는 자바스크립트용 모드나 css-mode를 사용하도록 한 것이다. 이 예에서 자바스크립트 모드는 js2-mode를 사용하도록 지정해 뒀는데 기본모드인 js-mode를 이용해도 된다.
mweb-filename-extensions는 multi-web-mode가 동작할 파일 확장자 이름이다. 필요하다면 추가하거나 수정하기 용이하다.
마지막 한 줄은 multi-web-mode가 항상 동작하도록 설정해 두는 부분인데 위에서 지정해 둔 확장자의 파일 외에는 동작하지 않으니 뭐 그냥 자동동작이라고 생각해두자.
이렇게 설정해 두고 HTML 파일을 편집해보면 놀라운 일이 벌어진다 -_-;;;; style태그 내에 들어가면 HTML코드들의 문법강조가 박살나면서 CSS 내용만 제대로 표시되는데 메이저모드가 css-mode로 변경되었기 때문이다. 다시 style 태그를 벗어나면 html-mode로 돌아온다. 물론 script 태그 내에서는 js2-mode가 적용되어서 또 와장창 깨지지만...
mumamo에 비해서 좋은 점이 있다면 원하는 모드를 마음껏 이용 할 수 있다는 점이다. mumamo는 내장된 모드만 이용 할 수 있기 때문에 간혹 뒤쳐진다는 느낌을 받아왔는데 역시 여러가지 시도해 보는게 좋은 것 같다.
이를 이용하는 분들이라면 물론 알겠지만, 자바스크립트나 CSS는 HTML과는 전혀 다른 문법을 사용한다. 따라서 HTML파일을 편집 중일 때 html-mode가 되는 경우 자바스크립트와 CSS를 편집하려 하는 순간 들여쓰기(indentation) 및 색상강조(Syntax Highlighting)이 박살(?)난다.
물론 해법은 있다. 이를 위해 multi-mode.el 같은 것들도 있고 nxhtml-mode의 mumamo를 이용 할 수도 있다. 아래 링크에서 다양한 방법을 찾을 수 있다.
나는 mumamo를 사용하고 있었지만 뭔가 안타까운 점(?)이 있어서 새롭게 multi-web-mode를 시도해 봤다. 이유는 굉장히 단순하다. 코드가 github에 올려져 있어서 서브모듈로 관리하기 쉽기 때문이다. -_-;;;;
설명은 위 공식저장소에 다 되어 있다. 그래도 쓸 게 없으니(?) 여기다 설정 코드를 붙여볼까 한다.
(add-to-list 'load-path "~/.emacs.d/vendor/multi-web-mode")
(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags '((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
(js2-mode "<script +\\(type=\"text/javascript\"\\|language=\"javascript\"\\)[^>]*>" "</script>")
(css-mode "<style +type=\"text/css\"[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "html" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)
첫 줄의 add-to-list는 multi-web-mode가 설치된 디렉토리를 알려주는 것이다. 그 다음 줄에서 해당 모드를 require해서 모듈을 로딩한다.mweb-default-major-mode는 사용하는 HTML 모드를 설정하면 될 것이다. 별 다른 모드를 추가하지 않았다면 Emacs에 기본적으로 포함된 html-mode를 그대로 이용하면 된다.
mweb-tags의 경우 가장 중요한 설정이다. 바로 HTML태그를 기준으로 어떤 모드를 적용 할 것인가에 대한 부분이다. 정규표현식으로 좀 복잡하게 표현되어 있지만 단순히 설명하자면 script 태그나 style 태그 내부에서는 자바스크립트용 모드나 css-mode를 사용하도록 한 것이다. 이 예에서 자바스크립트 모드는 js2-mode를 사용하도록 지정해 뒀는데 기본모드인 js-mode를 이용해도 된다.
mweb-filename-extensions는 multi-web-mode가 동작할 파일 확장자 이름이다. 필요하다면 추가하거나 수정하기 용이하다.
마지막 한 줄은 multi-web-mode가 항상 동작하도록 설정해 두는 부분인데 위에서 지정해 둔 확장자의 파일 외에는 동작하지 않으니 뭐 그냥 자동동작이라고 생각해두자.
이렇게 설정해 두고 HTML 파일을 편집해보면 놀라운 일이 벌어진다 -_-;;;; style태그 내에 들어가면 HTML코드들의 문법강조가 박살나면서 CSS 내용만 제대로 표시되는데 메이저모드가 css-mode로 변경되었기 때문이다. 다시 style 태그를 벗어나면 html-mode로 돌아온다. 물론 script 태그 내에서는 js2-mode가 적용되어서 또 와장창 깨지지만...
mumamo에 비해서 좋은 점이 있다면 원하는 모드를 마음껏 이용 할 수 있다는 점이다. mumamo는 내장된 모드만 이용 할 수 있기 때문에 간혹 뒤쳐진다는 느낌을 받아왔는데 역시 여러가지 시도해 보는게 좋은 것 같다.
댓글