Come rendere Emacs render HTML senza dover salvare il file?

Se hai mai usato JS Bin , sai che mentre digiti il ​​tuo codice (HTML, CSS, Javascript) sulla destra viene aggiornato per adattarlo a ciò che hai digitato. Ho trovato che questo è uno degli strumenti più utili per creare piccoli frammenti di codice. Tuttavia, vorrei che la stessa funzione fosse implementata in Emacs.

Quindi, mentre scrivo / modifico il codice nei miei buffer Emacs, la pagina web si aggiornava o si caricava in modo asincrono senza dover salvare il file o aggiornare la pagina.

Come nota a margine: non mi interessa se il browser Web è interno come w3 o esterno come Google Chrome .

Il mio strumento preferito per la modifica live di documenti HTML è la modalità spiedino . Aggiorna il documento nel browser senza un aggiornamento, in modo da ottenere un feedback immediato sulle modifiche.

Ecco un video dimostrativo che lo mostra in azione.

Ha modalità per l'editing live HTML, CSS e JavaScript. È molto utile per JavaScript, in quanto consente un flusso di lavoro molto simile all'hacking su Emacs Lisp.

Esistono diverse estensioni disponibili per la modalità spiedino, come senza spiedini , per la modifica dei fogli di stile MENO, e per i fogli di stile di ricarica degli spiedini , per la modifica in tempo reale di CSS in più fogli di stile (divulgazione: l'ho scritto).

La modalità impaziente ti porterà quasi ovunque. Ecco un bel video .

È particolarmente utile quando si eseguono la prima progettazione e prototipazione. Dal momento che esegue il rendering del buffer corrente, dovrai mettere tutti i tuoi html e css in un buffer, codice e tweak fino a quando non sei soddisfatto, quindi separarli tutti.

Anche Javascript può essere gestito allo stesso modo, ma è un po 'più complicato, dal momento che praticamente ogni sequenza di tasti esegue il rendering del buffer, si finisce con molti errori e così mentre si sta programmando!

Il mio flusso di lavoro suggerito è

• Crea una singola pagina HTML, con tutte le cose non modificabili incluse tramite tag
• Avvia la modalità impaziente, apri i browser e accedi alla pagina
• Codificare una tempesta
• Separa HTML, CSS, JS una volta che sei felice

I clienti sono particolarmente colpiti quando è possibile digitare e rendere immediatamente visibile l'aggiornamento, spesso in più browser contemporaneamente :)

È possibile scrivere una modalità secondaria che aggiorna la pagina Web renderizzata dopo aver modificato qualsiasi buffer rilevante. Ovviamente, farlo dopo ogni sequenza di tasti sarebbe eccessivo, quindi usare un timer e il rendering quando emacs è inattivo

Un rapido POC sarebbe:

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

Molte cose sono sbagliate con questo codice (la gestione delle finestre è terribile per esempio, ma anche sta usando shr, il che sicuramente ti aiuterà con JavaScript), ma dà l'idea. Lo sviluppo di una soluzione completa è certamente possibile, ma è un piccolo progetto da solo.