Comment faire pour rendre Emacs HTML sans avoir à enregistrer le fichier?

Si vous avez déjà utilisé JS Bin , vous savez que lorsque vous tapez votre code (HTML, CSS, Javascript) à droite, il est mis à jour pour correspondre à ce que vous avez tapé. J'ai trouvé que c'était l'un des outils les plus utiles pour créer de petits extraits de code. Cependant, j'aimerais que la même fonctionnalité soit implémentée dans Emacs.

Ainsi, lorsque je tape / édite du code dans mes tampons Emacs, la page Web s'actualise ou se charge de manière asynchrone sans que je doive enregistrer le fichier ou actualiser la page.

En remarque: peu m'importe que le navigateur Web soit interne comme w3 ou externe comme Google Chrome .

Mon outil préféré pour l'édition en direct de documents HTML est le mode brochette . Il met à jour le document dans le navigateur sans actualisation, vous obtenez ainsi un retour instantané sur vos modifications.

Voici une vidéo de démonstration qui la montre en action.

Il dispose de modes d'édition HTML, CSS et JavaScript en direct. C'est très utile pour JavaScript, car il permet un workflow un peu comme le piratage sur Emacs Lisp.

Il y a plusieurs extensions disponibles pour le mode brochette, comme sans brochette , pour éditer des feuilles de style MOINS, et des feuilles de style de rechargement de brochette , pour l'édition CSS en direct dans plusieurs feuilles de style (divulgation: j'ai écrit celle-là).

Le mode Impatient vous y emmènera la plupart du temps. Voici une vidéo sympa .

C'est particulièrement pratique lors des premiers styles et prototypes. Puisqu'il rend le tampon actuel, vous devrez mettre tous vos fichiers HTML et CSS dans un seul tampon, coder et modifier jusqu'à ce que vous soyez satisfait, puis le séparer.

Même Javascript peut être géré de la même manière - mais c'est un peu plus délicat, car à la base, chaque frappe rend le tampon, vous vous retrouvez avec beaucoup d'erreurs et autres pendant que vous codez!

Mon flux de travail suggéré est

• Créez une page HTML unique, avec tous les éléments inchangés inclus via des balises
• Démarrez en mode impatient, ouvrez votre ou vos navigateurs et accédez à la page
• Codez une tempête
• Séparez votre HTML, CSS, JS une fois que vous êtes satisfait

Les clients sont particulièrement impressionnés lorsque vous pouvez taper et que la mise à jour soit visible immédiatement, souvent dans plusieurs navigateurs en même temps :)

Vous pouvez écrire un mode mineur qui actualise la page Web rendue après avoir modifié tout tampon pertinent. Bien sûr, le faire après chaque frappe serait exagéré, donc utiliser un timer et un rendu quand emacs est inactif

Un POC rapide serait:

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

Beaucoup de choses ne vont pas avec ce code (la gestion des fenêtres est terrible par exemple, mais aussi son utilisation shr, ce qui va certainement vous aider avec javascript), mais cela donne l'idée. Développer une solution complète est certes possible, mais c'est un petit projet en soi.