파일을 저장하지 않고 Emacs가 HTML을 렌더링하도록하는 방법은 무엇입니까?

JS Bin을 사용한 적이 있다면 오른쪽에 코드 (HTML, CSS, Javascript)를 입력 할 때 입력 한 내용에 맞게 업데이트됩니다. 나는 이것이 작은 코드 스 니펫을 만드는 데 가장 유용한 도구 중 하나라는 것을 알았습니다. 그러나 동일한 기능을 Emacs에 구현하고 싶습니다.

따라서 Emacs 버퍼에 코드를 입력 / 편집 할 때 파일을 저장하거나 페이지를 새로 고치지 않아도 웹 페이지가 비동기 적으로 새로 고쳐 지거나로드됩니다.

참고로 : 웹 브라우저가 w3 와 같은 내부 인지 Chrome 과 같은 외부인지 는 중요 하지 않습니다 .

HTML 문서를 실시간 편집하는 데 선호하는 도구는 꼬치 모드 입니다. 새로 고치지 않고 브라우저에서 문서를 업데이트하므로 변경 사항에 대한 즉각적인 피드백을 얻을 수 있습니다.

다음 은 실제 비디오 를 보여주는 데모 비디오 입니다.

HTML, CSS 및 JavaScript를 실시간 편집하는 모드가 있습니다. Emacs Lisp의 해킹과 같은 워크 플로우를 가능하게하므로 JavaScript에 가장 유용합니다.

같은 꼬치 모드에 사용할 수있는 여러 가지 확장 기능이 있습니다 꼬치없는 , LESS 스타일 시트 및 편집 꼬치 리로드 - 스타일 시트 (: 그 하나를 썼다 공개) 여러 스타일의 라이브 편집 CSS에 대한이.

참을성이없는 모드 는 대부분의 방법을 제공합니다. 다음은 멋진 비디오 입니다.

첫 번째 스타일링 및 프로토 타이핑을 수행 할 때 특히 편리합니다. 현재 버퍼를 렌더링하므로 모든 html과 CSS를 하나의 버퍼에 넣고, 코드가 완성되고 마음에들 때까지 조정 한 다음 모두 분리해야합니다.

Javascript조차도 같은 방식으로 처리 할 수 ​​있지만 기본적으로 모든 키 입력이 버퍼를 렌더링하기 때문에 약간 까다로워서 코딩하는 동안 많은 오류가 발생합니다!

내 제안 워크 플로는

• 태그를 통해 변경되지 않은 모든 내용이 포함 된 단일 HTML 페이지를 만듭니다.
• 참을성이없는 모드를 시작하고 브라우저를 열고 페이지로 이동
• 폭풍을 코드
• 당신이 행복하면 HTML, CSS, JS를 분리

여러 브라우저에서 자주 입력 한 눈에 보이는 즉시 업데이트를 할 수 있습니다 때 클라이언트는 특히 감동 을 동시에 :)

관련 버퍼를 수정 한 후 렌더링 된 웹 페이지를 새로 고치는 부 모드를 작성할 수 있습니다. 물론, 각 키를 누른 후에는 너무 과잉이 될 수 있으므로 emacs가 유휴 상태 일 때 타이머와 렌더링을 사용하십시오.

빠른 POC는 다음과 같습니다.

(defvar my-html-render-delay 1)

(defun my-html-render-post-command-hook ()
  (run-with-idle-timer my-html-render-delay nil
                       (lambda (buffer) 
                         (shr-render-buffer buffer)
                         (select-window (get-buffer-window buffer))) 
                       (current-buffer)))

(defun my-html-render-install ()
  (interactive)
  (add-hook 'post-command-hook 'my-html-render-post-command-hook nil t))

이 코드에는 많은 문제가 있습니다 (예를 들어 창 처리는 끔찍하지만 shr자바 스크립트에 가장 도움이되는을 사용 하고 있습니다).하지만 아이디어를 제공합니다. 완전한 솔루션을 개발하는 것은 확실히 가능하지만 그 자체로는 작은 프로젝트입니다.