Wie kann man Emacs HTML rendern lassen, ohne die Datei speichern zu müssen?

Wenn Sie jemals JS Bin verwendet haben , wissen Sie, dass der Code (HTML, CSS, Javascript) auf der rechten Seite bei der Eingabe an Ihre Eingabe angepasst wird. Ich habe festgestellt, dass dies eines der nützlichsten Werkzeuge ist, um kleine Code-Schnipsel zu erstellen. Ich möchte jedoch, dass das gleiche Feature in Emacs implementiert wird.

Wenn ich also Code in meinen Emacs-Puffern eingebe / bearbeite, wird die Webseite aktualisiert oder asynchron geladen, ohne dass ich die Datei speichern oder die Seite aktualisieren muss.

Als Randnotiz: Es ist mir egal, ob der Webbrowser intern wie w3 oder extern wie Google Chrome ist .

Mein bevorzugtes Werkzeug für die Live-Bearbeitung von HTML-Dokumenten ist der Spieß-Modus . Das Dokument im Browser wird ohne Aktualisierung aktualisiert, sodass Sie sofort ein Feedback zu Ihren Änderungen erhalten.

Hier ist ein Demo-Video , das es in Aktion zeigt.

Es verfügt über Modi für die Live-Bearbeitung von HTML, CSS und JavaScript. Es ist am nützlichsten für JavaScript, da es einen Workflow ähnlich wie das Hacken auf Emacs Lisp ermöglicht.

Es gibt verschiedene Erweiterungen für den Spieß-Modus, z. B. Spieß- los, zum Bearbeiten von LESS-Stylesheets und zum erneuten Laden von Stylesheets , um CSS in mehreren Stylesheets live zu bearbeiten (Offenlegung: Ich habe das geschrieben).

Im ungeduldigen Modus sind Sie auf dem besten Weg dorthin. Hier ist ein cooles Video .

Dies ist besonders praktisch, wenn Sie das erste Styling und Prototyping durchführen. Da der aktuelle Puffer gerendert wird, müssen Sie alle Ihre HTML- und CSS-Daten in einem Puffer ablegen, den Code eingeben und optimieren, bis Sie zufrieden sind, und dann alles trennen.

Selbst Javascript kann auf die gleiche Weise gehandhabt werden - aber es ist ein bisschen kniffliger, da im Grunde genommen jeder Tastendruck den Puffer rendert, kommt es beim Codieren zu vielen Fehlern und dergleichen!

Mein vorgeschlagener Workflow ist

• Erstellen Sie eine einzelne HTML-Seite, wobei alle nicht veränderten Inhalte über Tags eingebunden werden
• Starte den Ungeduld-Modus, öffne deinen Browser und rufe die Seite auf
• Einen Sturm verschlüsseln
• Trennen Sie Ihre HTML, CSS, JS, wenn Sie zufrieden sind

Kunden sind besonders beeindruckt, wenn Sie das Update sofort eingeben und anzeigen können, häufig in mehreren Browsern gleichzeitig :)

Sie können einen Nebenmodus schreiben, der die gerenderte Webseite aktualisiert, nachdem Sie einen relevanten Puffer geändert haben. Dies nach jedem Tastendruck zu tun, wäre natürlich übertrieben. Verwenden Sie also einen Timer und rendern Sie, wenn der Emacs im Leerlauf läuft

Ein schneller POC wäre:

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

Viele Dinge stimmen nicht mit diesem Code überein (z. B. die Fensterbehandlung ist schrecklich, aber auch die Verwendung shr, die Ihnen mit Javascript auf jeden Fall helfen wird), aber es gibt die Idee. Die Entwicklung einer vollständigen Lösung ist sicherlich möglich, aber es ist ein kleines Projekt für sich.