¿Cómo hacer que Emacs renderice HTML sin tener que guardar el archivo?

Si alguna vez ha usado JS Bin , sabe que a medida que escribe su código (HTML, CSS, Javascript) a la derecha se actualiza para adaptarse a lo que escribió. He encontrado que esta es una de las herramientas más útiles para hacer pequeños fragmentos de código. Sin embargo, me gustaría que la misma característica se implemente en Emacs.

Entonces, a medida que escribo / edito código en mis buffers de Emacs, la página web se actualizará o cargará de forma asíncrona sin que tenga que guardar el archivo o actualizar la página.

Como nota al margen: no me importa si el navegador web es interno como w3 o externo como Google Chrome .

Mi herramienta preferida para editar documentos HTML en vivo es el modo de brocheta . Actualiza el documento en el navegador sin una actualización, para que reciba comentarios instantáneos sobre sus cambios.

Aquí hay un video de demostración que lo muestra en acción.

Tiene modos para editar en vivo HTML, CSS y JavaScript. Es más útil para JavaScript, ya que permite un flujo de trabajo muy similar a la piratería en Emacs Lisp.

Hay varias extensiones disponibles para el modo de brocheta, como sin brocheta , para editar hojas de estilo MENOS, y hojas de estilo de recarga de brocheta , para editar CSS en vivo en varias hojas de estilo (divulgación: escribí esa).

El modo impaciente te llevará la mayor parte del camino. Aquí hay un video genial .

Es especialmente útil cuando se realiza el primer diseño y creación de prototipos. Dado que representa el búfer actual, tendrás que poner todos tus html y css en un búfer, codificar y ajustar hasta que estés contento, luego sepáralos.

Incluso Javascript se puede manejar de la misma manera, pero es un poco más complicado, ya que básicamente cada pulsación de tecla representa el búfer, ¡terminas con muchos errores y mientras estás codificando!

Mi flujo de trabajo sugerido es

• Cree una sola página HTML, con todas las cosas que no cambian incluidas a través de etiquetas
• Inicie el modo impaciente, abra su (s) navegador (es) y acceda a la página
• Codificar una tormenta
• Separe su HTML, CSS, JS una vez que esté satisfecho

Los clientes están particularmente impresionados cuando puede escribir y tener la actualización visible de inmediato, a menudo en varios navegadores al mismo tiempo :)

Podría escribir un modo menor que actualice la página web representada después de modificar cualquier búfer relevante. Por supuesto, hacerlo después de cada pulsación de tecla sería excesivo, por lo que usar un temporizador y renderizar cuando emacs está inactivo

Un POC rápido sería:

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

Muchas cosas están mal con este código (el manejo de ventanas es terrible, por ejemplo, pero también está usando shr, lo que definitivamente lo ayudará con javascript), pero da la idea. Desarrollar una solución completa es ciertamente posible, pero es un proyecto pequeño en sí mismo.