Como fazer o Emacs renderizar HTML sem precisar salvar o arquivo?

Se você já usou o JS Bin , sabe que, à medida que digita seu código (HTML, CSS, Javascript), o lado direito é atualizado para se adequar ao que você digitou. Eu descobri que essa é uma das ferramentas mais úteis para criar pequenos trechos de código. No entanto, eu gostaria que o mesmo recurso fosse implementado no Emacs.

Portanto, ao digitar / editar o código nos buffers do Emacs, a página da Web é atualizada ou carregada de forma assíncrona, sem que eu precise salvar o arquivo ou atualizar a página.

Como uma observação lateral: não me importo se o navegador da web é interno como o w3 ou externo como o Google Chrome .

Minha ferramenta preferida para edição de documentos HTML ao vivo é o modo espeto . Ele atualiza o documento no navegador sem uma atualização, para que você obtenha feedback instantâneo sobre suas alterações.

Aqui está um vídeo de demonstração que mostra isso em ação.

Possui modos para edição ao vivo de HTML, CSS e JavaScript. É mais útil para JavaScript, pois permite um fluxo de trabalho semelhante ao hacking no Emacs Lisp.

Existem várias extensões disponíveis para o modo espeto, como sem espeto , para editar folhas de estilo LESS e folhas de estilo espeto-recarregar , para edição de CSS ao vivo em várias folhas de estilo (divulgação: escrevi essa).

O modo impaciente o levará a maior parte do caminho até lá. Aqui está um vídeo legal .

É especialmente útil ao fazer o primeiro estilo e prototipagem. Como ele renderiza o buffer atual, você terá que colocar todo o seu html e css em um buffer, codificar e ajustar até que esteja satisfeito e separar tudo.

Até o Javascript pode ser manipulado da mesma maneira - mas é um pouco mais complicado, já que basicamente cada pressionamento de tecla está renderizando o buffer, você acaba com muitos erros e enquanto codifica!

Meu fluxo de trabalho sugerido é

• Crie uma única página HTML, com todos os itens que não mudam incluídos por meio de tags
• Inicie o modo impaciente, abra o (s) navegador (s) e acesse a página
• Codifique uma tempestade
• Separe seu HTML, CSS e JS quando estiver satisfeito

Os clientes ficam particularmente impressionados quando você pode digitar e ter a atualização visível imediatamente, geralmente em vários navegadores ao mesmo tempo :)

Você pode escrever um modo secundário que atualize a página renderizada após modificar qualquer buffer relevante. Obviamente, fazer isso após cada pressionamento de tecla seria um exagero, portanto, usar um timer e renderizar quando o emacs estiver ocioso

Um POC rápido seria:

(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))

Muitas coisas estão erradas com esse código (o tratamento de janelas é terrível, por exemplo, mas também o está usando shr, o que definitivamente o ajudará no javascript), mas dá a idéia. É certamente possível desenvolver uma solução completa, mas é um projeto pequeno por si só.