Як змусити Emacs відтворювати HTML, не зберігаючи файл?


26

Якщо ви коли-небудь використовували JS Bin , ви знаєте, що під час введення коду (HTML, CSS, Javascript) праворуч оновлюється, щоб відповідати тому, що ви ввели. Я знайшов це одним із найкорисніших інструментів для створення невеликих фрагментів коду. Однак я хотів би, щоб ця ж функція була впроваджена в Emacs.

Отже, під час введення / редагування коду в моїх буферах Emacs веб-сторінка буде оновлюватися або завантажуватися асинхронно, не потребуючи збереження файлу чи оновлення сторінки.

Як зауваження: мені байдуже, чи веб-браузер внутрішній, як w3 , чи зовнішній, як Google Chrome .

Відповіді:


24

Моїм улюбленим інструментом для редагування в реальному часі HTML-документів є режим перекидання . Він оновлює документ у браузері без оновлення, тож ви отримуєте миттєвий відгук про свої зміни.

Ось демонстраційне відео, яке показує його в дії.

Він має режими для редагування в реальному часі HTML, CSS та JavaScript. Це найкорисніше для JavaScript, оскільки він забезпечує такий процес роботи, як хакерство на Emacs Lisp.

Є кілька розширень, доступних для режиму "шампур", як, наприклад, без скачків , для редагування таблиць стилів менше, і таблиць стилів для перезавантаження , для редагування CSS в реальному часі в декількох таблицях стилів (розкриття: я написав це).


22

Нетерплячий режим доставить вам більшу частину шляху туди. Ось класне відео .

Особливо зручно це робити при першій стилізації та розробці прототипів. Оскільки він надає поточний буфер, вам доведеться помістити всі ваші html та css в один буфер, код і налаштувати, поки ви не задоволені, а потім розділити все це.

Навіть з Javascript можна керувати однаково - але це трохи складніше, оскільки в основному кожен натискання клавіші відображає буфер, у вас виникає безліч помилок і таке, хоча ви кодуєте!

Запропонований нами робочий процес є

  • Створіть одну HTML-сторінку, в яку всі теги, що не змінюються, включені через теги
  • Запустіть нетерплячий режим, відкрийте веб-переглядач і перейдіть на сторінку
  • Складіть бурю
  • Розділіть свій HTML, CSS, JS, коли ви щасливі

Клієнти особливо вражені, коли ви можете вводити та отримувати оновлення відразу, часто в декількох браузерах одночасно :)


2
Також дивітьсяskewer
Джордон Біондо

5

Ви можете написати мінорний режим, який оновлює надану веб-сторінку після зміни будь-якого відповідного буфера. Звичайно, робити це після кожного натискання клавіші буде надмірно, тому використання таймера та візуалізація, коли Emacs не працює

Швидкий POC буде:

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

З цим кодом багато речей не вдається (наприклад, обробка вікон страшна, але також її використання shr, що, безумовно, допоможе вам у JavaScript), але це дає ідею. Розробка повноцінного рішення, безумовно, можлива, але це невеликий проект сам по собі.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.