[Emacs] CSS 편집 시 색상보기

xahlee의 Emacs 팁 포스팅은 정말 유익하다. 이전에 보던 html-mode 관련 포스팅에서 괜찮은 내용이 하나 보여서 소개한다.

제목 처럼 CSS를 편집할 때 컬러코드의 실제 색상을 비쥬얼(?)하게 볼 수 있는 기능이다.

(defvar hexcolour-keywords
  '(("#[abcdef[:digit:]]\\{6\\}"
     (0 (put-text-property
         (match-beginning 0)
         (match-end 0)
         'face (list :background
                     (match-string-no-properties 0)))))))
(defun hexcolour-add-to-font-lock ()
  (font-lock-add-keywords nil hexcolour-keywords))

(add-hook 'css-mode-hook 'hexcolour-add-to-font-lock)

실제로 스크린샷을 보면

이런 식으로 #xxxxxx식의 컬러코드를 배경색으로 표시해 준다.

안타깝게도 #xxx 형식의 축약된 컬러코드는 표시가 되지 않는데 일단 정규표현식 부분을 잘 고치고 컬러변환 부분을 추가하면 아마도 가능할 것 같다. 물론 rgb 함수를 이용하는 것도 추가한다면 할 수 있겠지만...

그 외에 색상 테이블은 이전에도 이야기 한 것 같지만, M-x list-colors-display 명령을 통해서 색상테이블을 볼 수 있다. 컬러RGB코드를 잘 모를 때는 역시 참조하는게 유용하다.

참고: http://xahlee.org/emacs/emacs_html.html