Jak zmusić Emacsa do renderowania HTML bez konieczności zapisywania pliku?

Jeśli kiedykolwiek korzystałeś z JS Bin , wiesz, że podczas pisania kod (HTML, CSS, JavaScript) po prawej stronie jest aktualizowany, aby pasował do wpisanego tekstu. Odkryłem, że jest to jedno z najbardziej przydatnych narzędzi do tworzenia małych fragmentów kodu. Chciałbym jednak, aby ta sama funkcja została zaimplementowana w Emacsie.

Tak więc, gdy piszę / edytuję kod w moich buforach Emacsa, strona internetowa odświeży się lub załaduje asynchronicznie bez konieczności zapisywania pliku lub odświeżania strony.

Na marginesie: nie dbam o to, czy przeglądarka internetowa jest wewnętrzna jak w3 , czy zewnętrzna jak Google Chrome .

Moim preferowanym narzędziem do edycji dokumentów HTML na żywo jest tryb szpikulca . Aktualizuje dokument w przeglądarce bez odświeżania, dzięki czemu otrzymujesz natychmiastową informację zwrotną o swoich zmianach.

Oto film demonstracyjny, który pokazuje go w akcji.

Posiada tryby edycji na żywo HTML, CSS i JavaScript. Jest to najbardziej przydatne w JavaScript, ponieważ umożliwia przepływ pracy podobny do hakowania w Emacs Lisp.

Dostępnych jest kilka rozszerzeń dla trybu szpikulca, takich jak bez szpikulca , do edytowania MNIEJSZYCH arkuszy stylów i szpikulców-odświeżanie arkuszy stylów , do edycji CSS na żywo w wielu arkuszach stylów (ujawnienie: napisałem ten jeden).

Tryb niecierpliwy zapewni Ci większość możliwości. Oto fajny film .

Jest to szczególnie przydatne podczas pierwszego stylizacji i prototypowania. Ponieważ renderuje bieżący bufor, będziesz musiał umieścić wszystkie swoje pliki HTML i css w jednym buforze, kodzie i poprawiać, aż będziesz zadowolony, a następnie rozdzielić wszystko.

Nawet Javascript może być obsługiwany w ten sam sposób - ale jest to nieco trudniejsze, ponieważ w zasadzie każde naciśnięcie klawisza powoduje wyświetlenie bufora, w wyniku czego powstaje wiele błędów i tak podczas kodowania!

Mój sugerowany przepływ pracy to

• Utwórz pojedynczą stronę HTML ze wszystkimi niezmiennymi treściami zawartymi w tagach
• Uruchom tryb niecierpliwy, otwórz przeglądarkę (przeglądarki) i przejdź do strony
• Przygotuj burzę
• Oddziel swój HTML, CSS, JS, kiedy będziesz zadowolony

Klienci są pod wrażeniem, gdy możesz pisać i wyświetlać aktualizację natychmiast, często w kilku przeglądarkach jednocześnie :)

Możesz napisać tryb pomocniczy, który odświeża renderowaną stronę internetową po zmodyfikowaniu odpowiedniego bufora. Oczywiście robienie tego po każdym naciśnięciu klawisza byłoby przesadą, więc używanie timera i renderowanie, gdy emacs jest na biegu jałowym

Szybki POC to:

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

Wiele rzeczy jest nie tak z tym kodem (obsługa okien jest na przykład okropna, ale także korzysta z niej shr, co z pewnością pomoże ci w javascript), ale daje pomysł. Opracowanie pełnego rozwiązania jest z pewnością możliwe, ale samo w sobie jest małym projektem.